roll20-character-sheets/Wicked Ones/wicked-ones.css

@import url('https://fonts.googleapis.com/css?family=Bitter:ital,wght@0,400;0,700;1,400&display=swap');

/* tabs */
input.sheet-tab:not([value="wicked-one"]) ~ .sheet-main .sheet-tab-wicked-one,
input.sheet-tab:not([value="dungeon"]) ~ .sheet-main .sheet-tab-dungeon,
input.sheet-tab:not([value="gm"]) ~ .sheet-main .sheet-tab-gm {
  display: none;
}

input.sheet-tab[value="wicked-one"] ~ .sheet-main .sheet-tab-button.sheet-wicked-one,
input.sheet-tab[value="dungeon"] ~ .sheet-main .sheet-tab-button.sheet-dungeon, 
input.sheet-tab[value="gm"] ~ .sheet-main .sheet-tab-button.sheet-gm {
  background: var(--darkback);
}

/* Broad Layout */
.sheet-translation-holder{
  display: none;
}

.sheet-column {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
}

.sheet-main {
  display: grid;
  grid-template-columns: 1fr repeat(2, min-content);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "left calling calling"
    "left middle right"
    "left bottom bottom";
  gap: 10px;
}

input.sheet-tab[value="dungeon"] ~ .sheet-main {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    "left calling"
    "left rooms";
}

input.sheet-tab[value="gm"] ~ .sheet-main {
  grid-template-columns: minmax(min-content, 1fr) 305px auto;
  grid-template-rows: repeat(3, min-content);
  grid-template-areas: 
    "players players calling"
    "players players reminders"
    "clocks invasions reminders"
    "notes adventurers adventurers";
}

.sheet-gm-calling {
  grid-row: 1;
  grid-column: 1 / span 2;
}

input.sheet-tab[value="gm"] ~ .sheet-main .sheet-calling .sheet-simple:not(.sheet-tab-gm){
  display: none;
}

.sheet-left {
  grid-area: left;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: 5px;
  grid-template-areas:
    "details details"
    "gear stress"
    "abilities abilities"
    "notes notes"
}

input.sheet-tab[value="dungeon"] ~ * .sheet-left {
  display: flex;
  flex-direction: column;
}

.sheet-right {
  grid-area: right;
  min-width: 220px;
}

.sheet-middle {
  grid-area: middle;
}

.sheet-calling {
  grid-area: calling;
  position: relative;
  display:grid;
  grid-auto-rows: min-content;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 0 5px;
  align-items: center;
}

.sheet-calling .sheet-tabs {
  grid-column: span 2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  justify-content: center;
  gap: 5px;
}

input.sheet-calling-settings[value="show"] ~ * .sheet-calling {
  background: white;
}

.sheet-calling .sheet-settings {
  position: absolute;
  top: -10px;
  right: -5px;
}

.sheet-calling .sheet-right {
  grid-area: auto;
  justify-self: right;
}

.sheet-calling > .sheet-suggestions {
  grid-column: span 2;
}

.sheet-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.sheet-config {
  display: flex;
  column-gap: 8px;
  flex-wrap: wrap;
  grid-column: span 2;
  font-size: 14px;
}

.sheet-config > .sheet-header {
  width: 100%;
}

.sheet-config > span {
  display: flex;
}

.sheet-rooms {
  grid-area: rooms;
}

.sheet-xp {
  grid-area: bottom;
  display: grid;
  gap: 4px;
  grid-template-rows: min-content min-content;
  grid-template-columns: repeat(2, minmax(min-content, 1fr));
}

.sheet-wicked {
  grid-row: span 2;
}

.sheet-light-words {
  display: grid;
  grid-template-columns: repeat(5, minmax(min-content, 1fr));
  grid-template-rows: repeat(5, min-content);
  grid-auto-flow: column;
  justify-items: center;
  gap: 3px;
  border: 1px solid darkgrey;
  font-size: x-small;
  padding: 0 3px 3px 3px; 
}

.sheet-light-words .sheet-header {
  grid-column: span 5;
  position: relative;
  top: -100%;
  background: white;
  font-size: x-small;
  margin-bottom: -0.8em;
  padding: 0 5%
}

.sheet-details {
  grid-area: details;
  display: grid;
  grid-template-columns: repeat(2, minmax(auto, 1fr));
  column-gap: 5px;
}

input[type="text"] {
  width: auto;
}

.sheet-tab-dungeon .sheet-details {
  grid-template-columns: 1fr min-content;  
}

.sheet-tab-dungeon .sheet-details > .sheet-labeled-line:not(.sheet-name) {
  grid-column: span 2;
}

.sheet-tier > .sheet-header {
  display: grid;
  grid-template-columns: repeat(6, min-content);
  align-items: end;
  justify-items: center;
}

.sheet-tier > .sheet-header > .sheet-text-button {
  grid-row: span 2;
}

.sheet-tier > .sheet-header > .sheet-normal {
  margin-bottom: -3px;
}

.sheet-labeled-line {
  display: flex;
  flex-direction: column-reverse;
}

.sheet-stress {
  grid-area: stress;
  display: grid;
  grid-template-rows: repeat(4, min-content);
  grid-template-columns: 1fr auto;
  grid-template-areas: 
    "header clock"
    "feral clock"
    "resist resist"
    "defense defense";
}

.sheet-stress > .sheet-header {
  grid-row: 1;
  grid-column: 1 / span 2;
}

.sheet-stress > .sheet-feral-back {
  grid-row: 2; 
  grid-column: 1 / span 2;
  background: var(--lightback);
}

.sheet-stress > .sheet-feral {
  grid-area: feral;
  background: var(--lightback);
  padding: 0 0 0 var(--box-padding);
}

.sheet-stress > .sheet-stress-clock {
  /* background: var(--lightback); */
  grid-area: clock;
}

.sheet-stress > .sheet-stress-clock > .sheet-clock-container {
  margin-top: 6px;
}

.sheet-resist {
  grid-area: resist;
  display: flex;
  flex-flow: column nowrap;
}

.sheet-defense {
  grid-area: defense;
}

.sheet-abilities {
  grid-area: abilities;
}

.sheet-ability, fieldset.repeating_ability + .repcontainer > .repitem {
  display: grid;
  grid-template-columns: 18px 1fr min-content;
  grid-auto-rows: min-content;
  grid-auto-flow: dense;
  align-items: start;
  column-gap: 5px;
}

.sheet-ability-desc {
  grid-column: span 2;
}

.sheet-ability-settings {
  grid-column: 3;
}

.sheet-ability-name {
  display: flex;
  align-items: baseline;
}

.sheet-ability-name input[type="text"] {
  flex-grow: 1;
}

.sheet-ability-text {
  grid-row: span 2;
}

.sheet-ability-text-name {
  font-weight: bolder;
}

.sheet-notes {
  grid-area: notes;
}

.sheet-tooltipper {
  position: relative;
}

.sheet-tooltip {
  visibility: hidden;
  width: max(200px, 100%);
  background-color: var(--lightback);
  text-align: justify;
  padding: 5px;
  border-radius: 5px;

  position: absolute;
  z-index: 1;
  top: calc(100% + 5px);
  left: 0;
}

.sheet-tooltipper:hover > .sheet-tooltip {
  visibility: visible;
}

.sheet-master-plan {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(4, min-content);
  column-gap: 5px;
}

.sheet-master-plan .sheet-header {
  grid-column: span 2;
}

.sheet-minions {
  background: var(--lightback);
  padding: 0 var(--box-padding);
}

.sheet-minions > .sheet-header {
  padding: 0 var(--box-padding);
  margin: 0 calc(-1 * var(--box-padding));
  background: var(--darkback);
}

.sheet-minion-pack {
  display: grid;
  grid-template-columns: min-content min-content min-content 1fr min-content;
  grid-template-rows: repeat(6, min-content);
  column-gap: 5px;
  grid-template-areas: 
    "count race race type type"
    "countlabel racelabel racelabel typelabel typelabel"
    "actions actions upgrades upgrades upgrades"
    "impulse impulse impulse impulse impulse"
    "notes notes notes notes notes";
  grid-template-areas: 
    "count race type"
    "countlabel racelabel typelabel"
    "actions actions actions"
    "upgrades upgrades upgrades"
    "impulse impulse impulse"
    "notes notes notes";
  grid-template-columns: repeat(3, min-content);
}

.sheet-minion-pack-header {
  white-space: nowrap;
}

.sheet-minion-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: start;
  margin-top: 3px;
}

.sheet-minion-count {
  grid-area: count;
}

input.sheet-minion-count {
  width: 2em;
}

.sheet-minion-countlabel {
  grid-area: countlabel;
}

.sheet-minion-type {
  grid-area: type;
}

.sheet-minion-typelabel{
  grid-area: typelabel;
}

.sheet-minion-race {
  grid-area: race;
}

.sheet-minion-racelabel {
  grid-area: racelabel;
}

.sheet-minion-actions {
  grid-area: actions;

}

.sheet-minion-actions span {
  white-space: nowrap;
}

.sheet-minion-actions button {
  font: inherit;
}

/* all this .sheet-minion-actions > div stuff was for 3x3 actions */
/* .sheet-minion-actions > div {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: min-content 1fr min-content 1fr min-content;
  grid-template-rows: repeat(3, min-content);
  
  justify-items: center;
  grid-template-areas:
  ". space . space2 ."
  ". space . space2 ."
  ". space . space2 ." ;
}

.sheet-minion-actions > div > .sheet-spacer:first-of-type {
  grid-area: space;
}

.sheet-minion-actions > div > .sheet-spacer:nth-of-type(2) {
  grid-area: space2;
}

.sheet-minion-actions > div > span {
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
} */

fieldset.repeating_minion-actions + .repcontainer {
  display: grid;
  grid-template-columns: repeat(2, minmax(min-content, 1fr));
  grid-auto-rows: min-content;
  column-gap: 10px;
}

fieldset.repeating_minion-actions + .repcontainer > .repitem {
  display: flex;
  align-items: baseline;
}

.sheet-minion-upgrades {
  grid-area: upgrades;
  display: grid;
  column-gap: 10px;
  grid-template-columns: min-content minmax(min-content, 1fr);
  grid-auto-rows: min-content;
}

.sheet-minion-upgrades :not(.sheet-textplus) {
  margin-top: 4px;
}

.sheet-minion-upgrades > .sheet-textplus {
  order: 1;
  grid-column: span 2;
}

.sheet-minion-upgrades > span:first-child {
  grid-column: span 2;
}

.sheet-minion-upgrades > span {
  white-space: nowrap;
}

.sheet-minion-impulse {
  grid-area: impulse;
}

.sheet-minion-impulse > .sheet-minion-impulse {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
}

.sheet-minion-impulse > .sheet-minion-impulse > input[type="text"] {
  flex-grow: 1;
}

.sheet-minion-notes {
  grid-area: notes;
}

.sheet-minion-impulse {
  display: flex;
  flex-direction: column;
}

.sheet-actions {
  display:grid;
  grid-template-rows: repeat(7, min-content);
  grid-template-columns: repeat(2, auto);
  width: 100%;
  row-gap: 7px;
}

.sheet-actions > div {
  grid-column: 1 / span 2;
}

.sheet-actions > div > div:not(:first-of-type) {
  margin-left: 7px;
}

.sheet-actions > div.sheet-small {
  grid-column: auto;
}

.sheet-actions ul {
  margin-bottom: 0;
  margin-top: 0;
}

.sheet-attribute {
  background: var(--lightback);
  padding: 0 var(--box-padding);
}

.sheet-attribute > :first-child {
  background: var(--darkback);
  padding: 0 var(--box-padding);
  margin: 0 calc(-1 * var(--box-padding));
}

.sheet-friend {
  display: flex;
  flex-direction: column;
}

.sheet-gold {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: min-content 1fr;
  grid-template-areas: 
    "header loot"
    "uses loot";
}

.sheet-loot {
  grid-area: loot;
}

div.placeholder {
  font-size: x-large;
  font-weight: bolder;
  -webkit-text-stroke: 1px black;
  color: white;
  text-align: center;
  vertical-align: middle;
}

.sheet-duties-header, fieldset.repeating_duties + .repcontainer > .repitem {
  display: grid;
  grid-template-columns: 2em 4em 1fr;
  column-gap: 3px;
  /* broke something on real game, investigate later?*/
  /* align-items: baseline; */
}

fieldset.repeating_duties + .repcontainer > .repitem {
  grid-template-rows: min-content min-content;
}

fieldset.repeating_duties + .repcontainer > .repitem > button {
  grid-column: span 2;
  padding: 1px 3px;
  background: var(--lightback);
}

fieldset.repeating_duties + .repcontainer > .repitem > .sheet-auto-expand {
  grid-row: span 2;
}

fieldset.repeating_duties + .repcontainer > .repitem input[type="text"],
fieldset.repeating_duties + .repcontainer > .repitem input[type="number"] {
  width: 100%;
  /* height: 100%; */
}

.sheet-duty-tier {
  text-align: center;
}

.repcontainer.editmode + .repcontrol {
  min-height: 21px;
}

.sheet-players {
  grid-area: players;
}

.sheet-gm-reminders {
  grid-area: reminders;
}

.sheet-adventurers {
  grid-area: adventurers;
  text-align: center;
}

.sheet-invasions {
  grid-area: invasions;
  text-align: center;
}

.sheet-invasions .repcontrol,
.sheet-adventurers .repcontrol {
  text-align: initial;
}

.sheet-gm-clocks {
  grid-area: clocks;
}

.sheet-gm-clocks .sheet-header {
  flex-direction: column;
}

.sheet-gm-clocks .sheet-header .sheet-subheader {
  align-self: stretch;
  display: flex;
}

.sheet-players .repcontainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
  gap: 5px;
}

.sheet-players .repitem {
  background: var(--lightback);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3px;
}

.sheet-2col {
  grid-column: span 2;
}

.sheet-invasions-header,
.sheet-invasions .repitem {
  display: grid;
  grid-template-columns: 3.1em repeat(5, 40px) 5em;
}

.sheet-invasions .repcontainer {
  counter-reset: invasions;
}

.sheet-invasions .repitem {
  counter-increment: invasions;
  margin: 0;
}

.sheet-invasions .repitem > span > span::before {
  content: counter(invasions);
}

.sheet-table-header > *,
fieldset.sheet-table ~.repcontainer > .repitem > * {
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 0;
  border-radius: 0;
}

fieldset.sheet-table ~ .repcontainer > .repitem > span,
.sheet-table-header > :not(.sheet-box) {
  display: grid;
  align-items: end;
}

.sheet-invasions-header > :first-child {
  grid-column: 2 / span 6;
  text-align: left;
}

.sheet-table-header > :not(.sheet-box) {
  background-color: var(--lightback);
}

.sheet-invasions-header > :first-child, 
.sheet-table-header > :last-child,
fieldset.sheet-table ~ .repcontainer > .repitem > :last-child {
  border-right: 1px solid black;
}

fieldset.sheet-table ~ .repcontainer {
  border-bottom: 1px solid black;
}

.sheet-invasions input[type="text"] {
  text-align: center;
  padding: 3.9px 0 0 0;
}

.sheet-adventurers-header,
.sheet-adventurers .repitem {
  display: grid;
  grid-template-columns: 1fr 32px 182px 65px;
}

.sheet-adventurers .repitem {
  padding: 3px 0;
  margin: 0;
}

.sheet-adventurers .repitem:nth-child(even) {
  background: var(--lightback);
}

.sheet-adventurers .repitem .sheet-auto-expand {
  text-align: left;
}

.sheet-adventurers-header :first-child {
  text-align: left;
}

.sheet-invasion-reminder {
  white-space: pre-line;
  padding: 1px;
  text-align: left;
}

button.sheet-health {
  background: none;
  padding: 0;
  border: 0;
  display: none;
}

input.sheet-health-max[value="2"] ~ button.sheet-health1,
input.sheet-health-max[value="4"] ~ button.sheet-health1, input.sheet-health-max[value="4"] ~ button.sheet-health2,
input.sheet-health-max[value="6"] ~ button.sheet-health1, input.sheet-health-max[value="6"] ~ button.sheet-health2, input.sheet-health-max[value="6"] ~ button.sheet-health3,
input.sheet-health-max[value="8"] ~ button.sheet-health1, input.sheet-health-max[value="8"] ~ button.sheet-health2, input.sheet-health-max[value="8"] ~ button.sheet-health3, input.sheet-health-max[value="8"] ~ button.sheet-health4,
input.sheet-health-max[value="10"] ~ button.sheet-health1, input.sheet-health-max[value="10"] ~ button.sheet-health2, input.sheet-health-max[value="10"] ~ button.sheet-health3, input.sheet-health-max[value="10"] ~ button.sheet-health4, input.sheet-health-max[value="10"] ~ button.sheet-health5 {
  display: initial;
}

img.sheet-heart {
  display: none;
}

input.sheet-heart[value="full"] ~ img.sheet-full,
input.sheet-heart[value="slashed"] ~ img.sheet-slashed,
input.sheet-heart[value="double"] ~ img.sheet-double {
  display: initial;
}

.sheet-hearts, .sheet-moves {
  display: flex;
  align-content: center;
  justify-content: center;
}

.sheet-hearts {
  justify-content: left;
}

.sheet-reminder-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3px;
}

.sheet-reminder-checks > div {
  display: flex;
  column-gap: 1px;
}

/* Styling */
.charsheet {
  --default-fonts: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-family: 'bitter', var(--default-fonts);
  --lightback: #EEF1F3;
  --darkback: #BABABA;
  --box-padding: 4px;
  --filled: #89898A;
  --blackback: #1F2121;

  --crossbg: linear-gradient(to top left,
              rgba(0,0,0,0) 0%,
              rgba(0,0,0,0) calc(50% - 0.8px),
              rgba(0,0,0,1) 50%,
              rgba(0,0,0,0) calc(50% + 0.8px),
              rgba(0,0,0,0) 100%),
             linear-gradient(to top right,
              rgba(0,0,0,0) 0%,
              rgba(0,0,0,0) calc(50% - 0.8px),
              rgba(0,0,0,1) 50%,
              rgba(0,0,0,0) calc(50% + 0.8px),
              rgba(0,0,0,0) 100%);
}

input, textarea, select {
  font-family: var(--default-fonts);
  text-align: initial;
  background: transparent;
}

.sheet-ability, fieldset.repeating_ability + .repcontainer > .repitem {
  text-align: justify;
}

ul.sheet-no-bullets {
  list-style-type: none; /* Remove bullets */
  padding: 0px; /* Remove padding */
  margin: 0 3px; /* Remove margins */
}

ul > li {
  font-size: 12px;
  line-height: 13.5px;
}

ul.sheet-no-bullets > li {
  font-size: 12px;
  line-height: 14.5px;
}

ul > li.sheet-subheader {
  margin-top: 5px;
  font-size: 12px;
  line-height: 15px;
  font-weight: bold;
  list-style-type: none;
  white-space: nowrap;
}

ul:not(.sheet-no-bullets) > li.sheet-no-bullets,
ul:not(.sheet-no-bullets) > li.sheet-subheader {
  margin-left: -25px;
  list-style-type: none;
}

.sheet-fortune{
  background: var(--lightback);
  display: flex;
  padding: 3px;
  justify-self: flex-end;
  font-weight: bold;
}

/* .sheet-duties {
  font-size: 12px;
} */

.sheet-header {
  font-weight: bolder;
  font-size: large;
  display: flex;
  align-items: baseline;
}

.sheet-header.sheet-small {
  font-size: small;
}

.sheet-header > .sheet-subheader {
  font-size: 11px;
  font-weight: normal;
  align-self: center;
  color: #202020;
}

.sheet-spacer {
  flex-grow: 1;
}

.sheet-header > * {
  white-space: nowrap;
}

.sheet-header.sheet-box {
  /* margin-top: 3px; */
  background: var(--darkback);
  padding: 1px var(--box-padding);
}

.sheet-labeled-line span {
  font-size: 12px;
}

.sheet-split {
  justify-self: start;
}

.sheet-split + .sheet-split {
  justify-self: end;
}

.repeating_supply + .repcontainer {
  padding-right: var(--box-padding);
}

.sheet-normal {
  font-size: small;
  font-weight: normal;
}

.sheet-header > button.sheet-diamond + * {
  margin-left: 4px
}

/* button.sheet-diamond:not(:nth-child(2)) {
  margin-left: 5px;
} */

hr {
  margin-top: 0;
  margin-bottom: 0;
} 

.sheet-nowrap {
  white-space: nowrap;
}

.sheet-calling {
  background: gray;
  font-weight: bolder;
  font-size: x-large;
}

.sheet-calling .sheet-right{
  font-size: small;
  text-align: center;
  margin: 2px 0;
}

.sheet-pre {
  white-space: pre-line;
}

input[type="text"] {
  padding: .3em 0 0 .3em;
  border: 0;
  border-bottom: 1px solid darkgrey;;
}

.sheet-dice {
  font-family: dicefontd6;
  font-weight: normal;
}

/* .charsheet {
  text-align: justify;
}

textarea {
  text-align: left;
} */

/* Inputs */
select {
  border: 0;
  padding: 0;
  margin: 0;
  width: revert;
  height: revert;
}

button.sheet-text-button[type="roll"],
button.sheet-text-button[type="action"] {
  padding: 0;
  font: inherit;
  border: 0;
  background: transparent;
  line-height: 1em;
}

.charsheet label.sheet-clock-label input[type=checkbox], .charsheet label.sheet-clock-label input[type=radio] {
  position: absolute;
}

.charsheet label.sheet-clock-label:hover input[type=checkbox] + span, .charsheet label.sheet-clock-label:hover input[type=radio] + span {
  opacity: 0.7;
}

.charsheet input[type=checkbox], .charsheet input[type=radio] {
  opacity: 0;
  z-index: 1;
  -moz-appearance: none;
  position: relative;
}

.charsheet input[type=checkbox] + span, .charsheet input[type=radio] + span {
  cursor: pointer;
  display: inline-block;
  transition: all 0.2s, opacity 0s;
}

.sheet-auto-expand {
  font-size: 13px;
  letter-spacing: 1px;
  padding: 2px 3px;
  line-height: 12px;
  flex: auto;
  min-width: 0;
  margin-right: 2px;
  min-height: 28px;
  position: relative;
  cursor: text;
  --line-height: calc(1em + 4px);
  line-height: var(--line-height);
  min-height: calc(var(--line-height) * 2 + 4px);
  font-family: var(--default-fonts);
}

.sheet-auto-expand span {
  visibility: hidden;
  white-space: pre-wrap;
  display: block;
}

.sheet-auto-expand textarea {
  position: absolute;
  overflow: hidden;
  z-index: 1;
  top: 0;
  left: 0;
  resize: none;
  height: 100%;
  word-wrap: break-word;
  padding: inherit;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  background: repeating-linear-gradient(
    to bottom, transparent
    , transparent var(--line-height), darkgrey calc(var(--line-height) + 1px)
  );
  background-attachment: local;
  border: 0;
}

.charsheet textarea {
  resize: vertical;
  display: block;
}

.sheet-dropdown {
  display: grid;
  grid-template-columns: min-content minmax(min-content, 1fr);
  grid-template-rows: min-content min-content;
  flex-grow: 1;
  margin-right: .45em;
}

.sheet-dropdown div.sheet-dropdown {
  grid-column: span 2;
  background: white;
  padding: 3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 3px;
}

input.sheet-dropdown[value="up"] ~ div.sheet-dropdown {
  display: none;
}

/* .sheet-itemheader:not(:hover) .sheet-text-button {
  display: none;
}

.sheet-itemheader .sheet-text-button {
  margin-left: auto;
} */

.sheet-itemheader label.sheet-clock-label.sheet-text-button input[type=checkbox] + span {
  opacity: 1;
  color: #333;
}

.sheet-itemheader label.sheet-clock-label.sheet-text-button:hover input[type=checkbox] + span {
  color: red;
}

.charsheet div, .charsheet span, .charsheet textarea, .charsheet ul, .charsheet li, .charsheet span, .charsheet label.sheet-clock-label {
  box-sizing: border-box;
}

.charsheet label.sheet-clock-label {
  margin: 0;
  padding: 0;
  display: flex;
  width: auto;
  color: #333;
  font: inherit;
}

.sheet-clocks button[type=roll].sheet-broadcast-button,
.sheet-clock-container button[type=roll].sheet-broadcast-button {
  /* font-size: 11px; */
  line-height: 11px;
  height: 12px;
  width: 12px;
  color: #777;
  right: -12px;
  top: 0;
  background: transparent;
  display:none;
}

button[type=roll].sheet-broadcast-button {
  font-family: pictos;
  position: absolute;
  border: none;
  margin: 0;
  padding: 0;
  z-index: 3;
}

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

button[type=roll].sheet-broadcast-button::before{
  content: "w";
  font-family: pictos;
}

/* input.sheet-zero {
  width: 13px;
  height: 13px;
  margin-right: -13px;
  vertical-align: top;
}

.sheet-zero + span {
  height: 11px;
  width: 11px;
  margin-top: 1px;
  margin-right: 2px;
  vertical-align: top;
  border: 1px solid black;
  background: white;
  border-radius: 50%;
  position: relative;
}

.sheet-zero + span::before, .sheet-zero + span::after {
  position: absolute;
  width: 1px;
  content: "";
  left: 0;
  background: black;
  height: 11px;
}

.sheet-zero + span::after {
  transform: translate(4px, -1px) rotate(135deg);
}

.sheet-zero + span::before {
  transform: translate(4px, -1px) rotate(45deg);
}

.sheet-zero:checked + span {
  visibility: hidden;
} */

.sheet-textplus {
  display: inline-flex;
  align-items: baseline;
  width: 100%;
}

.sheet-textplus > input.sheet-textplus {
  flex-grow: 1;
  width: auto;
}

.sheet-textplus > input.sheet-textplus:not(:first-child) {
  margin-left: 2px;
}

.sheet-textplus > input.sheet-textplus:not(:last-child) {
  margin-right: 2px;
}

.repitem > :nth-child(2):last-child {
  width: 100%;
}

/* Clear default button styling */
button.sheet-toggle {
  margin: 0;
  overflow: visible;
  text-transform: none;
  border-style: none;
  padding: 0;
  background: white;
  cursor: pointer;
}

button.sheet-dropdown {
  background: transparent;
  justify-self: end;
}

/* Fake radio */
/* input[type="radio"] + span::before {
  margin-right: 4px;
  border: solid 1px #a8a8a8;
  line-height: 14px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 2px #ccc;
  background: #f6f6f6;
  background: radial-gradient(#f6f6f6, #dfdfdf);
  content: "•";
  width: 12px;
  height: 12px;
  font-size: 24px;
  border-radius: 50%;
} */

/* Remove dot from all radios _after_ selected one */
input[type="radio"]:checked ~ input[type="radio"] + span::before {    
  content: "";
}

/* Fake Checkboxes */

button.sheet-square, button.sheet-diamond, button.sheet-circle {
  border: 1px solid black;
  width: 10px;
  height: 10px;
  margin: 2px;
  align-self: center;
}

button.sheet-tall {
  border: 1px solid black;
  width: 7px;
  height: 15px;
  margin: auto 2px;
}

button.sheet-circle {
  border-radius: 50%;
}

input[value="marked"] + button.sheet-square,
input[value="marked"] + button.sheet-diamond,
input[value="marked"] + button.sheet-tall,
input[value="marked"] + button.sheet-circle,
button.sheet-action0,
input[value="1"] ~ button.sheet-action1,
input[value="2"] ~ button.sheet-action2, input[value="2"] ~ button.sheet-action1,
input[value="3"] ~ button.sheet-action3, input[value="3"] ~ button.sheet-action2, input[value="3"] ~ button.sheet-action1,
input[value="4"] ~ button.sheet-action4, input[value="4"] ~ button.sheet-action3, input[value="4"] ~ button.sheet-action2, input[value="4"] ~ button.sheet-action1 {
  background-color: black;
}

button.sheet-practice {
  display: grid;
}

button.sheet-practice > span {
  width: 100%;
  height: 100%;
  grid-area: 1 /1;
}

input.sheet-action[value="0.1"] ~ button.sheet-practice {
  background:
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%);
}

input.sheet-action[value="0.2"] ~ button.sheet-practice {
  background: var(--crossbg);
}

button.sheet-diamond {
  transform: rotate(45deg) scale(calc(1 / 1.2));
  /* scale down to match square's footprint */
} 

button.sheet-symbol, button.sheet-arrow {
  background: transparent;
}

button.sheet-settings {
  opacity: 0.35;
}

.sheet-symbol,
button.sheet-symbol > span {
  font-family: pictos;
}

.sheet-symbol-three,
button.sheet-symbol-three > span {
  font-family: "pictos three";
}

input[value="show"] + button.sheet-settings {
  opacity: 1;
}

button.sheet-settings:hover {
  opacity: 0.5;
}

.sheet-chevron {
  height: 0;
  padding: 25% 0;
}

.sheet-chevron::before {
	border-style: solid;
	border-width: 0.1em 0.1em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	left: 0.15em;
	position: relative;
	top: 0.15em;
	transform: rotate(-45deg);
	vertical-align: top;
  width: 0.45em;
}

.sheet-chevron.sheet-bottom:before {
	top: 0;
	transform: rotate(135deg);
}

/* Hiders */

input.sheet-hider[value="hide"] ~ .sheet-hider {
  display: none;
}

/* Hide the section(s) that do not match the attribute value */
input.sheet-toggle:not([value="show"]) + button.sheet-toggle > span.sheet-show {
  display: none;
}
input.sheet-toggle:not([value="hide"]) + button.sheet-toggle > span.sheet-hide {
  display: none;
}

input.sheet-settings:not([value="show"]) ~ .repcontainer .repitem .sheet-complex,
input.sheet-settings[value="show"] ~.repcontainer .repitem .sheet-simple, 
input.sheet-settings:not([value="show"]) ~ .sheet-complex,
input.sheet-settings[value="show"] ~ .sheet-simple {
  display: none;
}

input.sheet-extra ~ .sheet-extra1, 
input.sheet-extra ~ .sheet-extra2,
input.sheet-extra ~ .sheet-extra3,
input.sheet-extra ~ .sheet-extra4,
input.sheet-extra ~ .sheet-extra5 {
  display:none;
}

input.sheet-extra[value="5"] ~ .sheet-extra1, input.sheet-extra[value="5"] ~ .sheet-extra2, input.sheet-extra[value="5"] ~ .sheet-extra3, input.sheet-extra[value="5"] ~ .sheet-extra4, input.sheet-extra[value="5"] ~ .sheet-extra5,
input.sheet-extra[value="4"] ~ .sheet-extra1, input.sheet-extra[value="4"] ~ .sheet-extra2, input.sheet-extra[value="4"] ~ .sheet-extra3, input.sheet-extra[value="4"] ~ .sheet-extra4,
input.sheet-extra[value="3"] ~ .sheet-extra1, input.sheet-extra[value="3"] ~ .sheet-extra2, input.sheet-extra[value="3"] ~ .sheet-extra3,
input.sheet-extra[value="2"] ~ .sheet-extra1, input.sheet-extra[value="2"] ~ .sheet-extra2,
input.sheet-extra[value="1"] ~ .sheet-extra1 {
  display: inline-block;
}

input.sheet-suggested:not([value=""]) ~ .sheet-suggestion {
  display:none;
}

/* span.sheet-hider-arrow {
  position: relative;
  right: -10px;
  width: 0;
  height: 0;

  border-top: 10px solid black;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
} */

/* CLOCKS */

.sheet-clock {
  background-size: cover;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  /* position: relative; */
  --show56: none;
  --show78: none;

  display: grid;
}

input.sheet-size[value="4"] + input.sheet-clock + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-4-0.png);
  --size: 4;
}

input.sheet-size[value="6"] + input.sheet-clock + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-6-0.png);
  --size: 6;
  --show56: block;
}

input.sheet-size[value="8"] + input.sheet-clock + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-8-0.png);
  --size: 8;
  --show56: block;
  --show78: block;
}

input.sheet-size[value="4"] + input.sheet-clock[value="1"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-4-1.png);
}

input.sheet-size[value="4"] + input.sheet-clock[value="2"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-4-2.png);
}

input.sheet-size[value="4"] + input.sheet-clock[value="3"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-4-3.png);
}

input.sheet-size[value="4"] + input.sheet-clock[value="4"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-4-4.png);
}

input.sheet-size[value="6"] + input.sheet-clock[value="1"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-6-1.png);
}

input.sheet-size[value="6"] + input.sheet-clock[value="2"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-6-2.png);
}

input.sheet-size[value="6"] + input.sheet-clock[value="3"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-6-3.png);
}

input.sheet-size[value="6"] + input.sheet-clock[value="4"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-6-4.png);
}

input.sheet-size[value="6"] + input.sheet-clock[value="5"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-6-5.png);
}

input.sheet-size[value="6"] + input.sheet-clock[value="6"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-6-6.png);
}

input.sheet-size[value="8"] + input.sheet-clock[value="1"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-8-1.png);
}

input.sheet-size[value="8"] + input.sheet-clock[value="2"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-8-2.png);
}

input.sheet-size[value="8"] + input.sheet-clock[value="3"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-8-3.png);
}

input.sheet-size[value="8"] + input.sheet-clock[value="4"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-8-4.png);
}

input.sheet-size[value="8"] + input.sheet-clock[value="5"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-8-5.png);
}

input.sheet-size[value="8"] + input.sheet-clock[value="6"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-8-6.png);
}

input.sheet-size[value="8"] + input.sheet-clock[value="7"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-8-7.png);
}

input.sheet-size[value="8"] + input.sheet-clock[value="8"] + .sheet-clock {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_clocks/Red-8-8.png);
}

button.sheet-segment {
  grid-area: 1 / 1;
  height: 100%;
  width: 100%;
  /* left: 50%;
  bottom: 50%;
  position: absolute; */
  transform-origin: bottom left;
  opacity: 0;
  /* have to use translate instead of absolute cuz roll20 bug
     this doesn't line up well with margins etc */
  margin: -1px; /* offsets border, which is important for seeing where they are in testing */
  padding: 0;

  --share: calc((360 / var(--size)) * 1deg);
  transform:
    translate(50%, -50%)
    rotate(calc(var(--share) * (var(--segment) - 1)))
    skewY(calc((var(--share) - 90deg)));
}

button.sheet-segment.sheet-1 {
  --segment: 1;
}

button.sheet-segment.sheet-2 {
  --segment: 2;
}

button.sheet-segment.sheet-3 {
  --segment: 3;
}

button.sheet-segment.sheet-4 {
  --segment: 4;
}

button.sheet-segment.sheet-5 {
  --segment: 5;
  display: var(--show56);
}

button.sheet-segment.sheet-6 {
  --segment: 6;
  display: var(--show56);
}

button.sheet-segment.sheet-7 {
  --segment: 7;
  display: var(--show78);
}

button.sheet-segment.sheet-8 {
  --segment: 8;
  display: var(--show78);
}

button.sheet-zero {
  background: var(--crossbg);
  border-radius: 50%;
  border: 1px solid black;
  padding: 0;
  width: 10px;
  height: 10px;
  align-self: end;
}

input.sheet-clock[value="0"] ~ button.sheet-zero {
  display: none;
}

.sheet-clock-container {
  display: grid;
  grid-template-columns: repeat(2, min-content);
}

.sheet-size-choice {
  display: flex;
  flex: 0 0 auto;
  height: 45px;
  margin: 2px 0;
  width: 44px;
  line-height: 12px;
  font-size: 13px;
  font-family: "Times New Roman", Times, serif;
  align-content: space-evenly;
  flex-wrap: wrap;
}

.sheet-size:not([value=""]) ~ .sheet-size-choice,
.sheet-size[value=""] ~ .sheet-broadcast-button,
.sheet-size[value=""] ~ .sheet-clock-container {
  display: none;
}

.sheet-size-choice > label.sheet-clock-label.sheet-text-button {
  height: 17px;
  padding: 3px;
  flex: 0 0 40%;
  margin: auto;
  justify-content: center;
}

/* Repeating Sections */

fieldset.sheet-grid ~ .repcontainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5px;
}

.sheet-gm-clocks div.repcontainer {
  grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
}

.sheet-clocks .repcontainer > .repitem {
  display: grid;
  grid-template-rows: min-content minmax(min-content, 1fr);
  column-gap: 5px;
}

.sheet-clocks .repcontainer > .repitem > :nth-child(2) {
  justify-self: center;
}

.sheet-clocks .repcontainer > .repitem .sheet-clock-container {
  margin-right: 12px;
}

.repitem {
  margin-top: 2px;
}

.repcontrol button {
  background: transparent;
  color: #777;
  border-radius: 0;
  border-color: #b4b4b4;
  transition: all 0.2s;
  font-family: pictos;
  font-size: 0;
  font-weight: bold;
  padding: 5px 3px 2px;
  line-height: 8px;
}

.repcontrol {
  margin-top: 2px;
}

.charsheet .repcontrol button.repcontrol_edit::after {
  content: "p";
}

.charsheet .repcontrol button.repcontrol_add::after {
  content: "&";
}

.charsheet .repcontrol button.repcontrol_edit::after, .charsheet .repcontrol button.repcontrol_add::after {
  font-size: 12px;
}

/* Roll Templates */

.sheet-rolltemplate-basic {
  font-family: 'bitter', var(--default-fonts);
  /* border: 1px solid black; */
  background: #f0f0f0;
}

.sheet-rolltemplate-basic div {
  padding: 3px;
}

.sheet-rolltemplate-basic .sheet-character {
  font-size: large;
  background: darkgray;
  line-height: .9em;
  font-weight: bold;
  ;
}

.sheet-rolltemplate-basic .sheet-action {
  background: lightgray;
  font-size: 1.1em;
  padding-left: 11px;
}

.sheet-rolltemplate-basic .sheet-roll {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, 2.1em);
  grid-auto-rows: 2.1em;
  gap: 5px;
}

.sheet-rolltemplate-basic .sheet-image-roll {
  --gap: 5;
  --gap-px: calc(1px * var(--gap));
  --count: 6;
  --size: calc(100% / var(--count) - (var(--gap-px) - var(--gap-px) / var(--count)));
  /* can't round calc, fractional pixels make weird image size inconsistencies */
  --size: 32px;
  grid-template-columns: repeat(auto-fit, var(--size));
  grid-auto-rows: 1fr;
  gap: var(--gap-px);
}

.sheet-rolltemplate-basic .sheet-image-roll::before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.sheet-rolltemplate-basic .sheet-image-roll > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.sheet-rolltemplate-basic .sheet-subaction {
  background: lightgray;
  font-style: italic;
  padding-top: 0;
  margin-top: -3px;
  padding-left: 12px;
  font-size: small;
}

.sheet-rolltemplate-basic .inlinerollresult {
  font-size: 1.5em;
  font-weight: normal;
  text-align: center;
  line-height: .5em;
  background: #3D478A;
  border-color: #3D478A;
  color: #DFD6CA;
  padding: 25% 0;
}

.sheet-rolltemplate-basic .inlinerollresult.fullfail {
  background: #7A7A7A;
  border-color: #7A7A7A;
}

.sheet-rolltemplate-basic .inlinerollresult.fullcrit {
  background: #9F3727;
  border-color: #9F3727;
}

.sheet-rolltemplate-basic .sheet-zero {
  text-align: right;
}

.sheet-rolltemplate-basic .sheet-image-roll .inlinerollresult {
  color: transparent;
  border: 0;
  background: none;
  background-size: contain;
}

.sheet-rolltemplate-basic .sheet-image-roll  > span {
  display: grid;
}

/* TODO Re-point images to github */

.sheet-rolltemplate-basic .sheet-image-roll .sheet-roll1 .inlinerollresult {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_dice/Dice-1-Small.png);
}

.sheet-rolltemplate-basic .sheet-image-roll .sheet-roll2 .inlinerollresult {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_dice/Dice-2-Small.png);
}

.sheet-rolltemplate-basic .sheet-image-roll .sheet-roll3 .inlinerollresult {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_dice/Dice-3-Small.png);
}

.sheet-rolltemplate-basic .sheet-image-roll .sheet-roll4 .inlinerollresult {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_dice/Dice-4-Small.png);
}

.sheet-rolltemplate-basic .sheet-image-roll .sheet-roll5 .inlinerollresult {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_dice/Dice-5-Small.png);
}

.sheet-rolltemplate-basic .sheet-image-roll .sheet-roll6 .inlinerollresult {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Wicked%20Ones/assets/wo_dice/Dice-6-Small.png);
}