roll20-character-sheets/CWOD-Exalted/EXvWOD.css

input:not([type=radio]):not([type=checkbox]), select {
  border: none;
  border-bottom: 1px solid black;
  max-width: 50%;
  border-radius: 0;
  background: transparent;
}

.sheet-header > label {
  display: block;
  position: relative;
}
.sheet-header > label > input,
.sheet-header > label > select {
  position: absolute;
  right: 0;
}

.sheet-title {
  text-align: center;
  padding-bottom: 0.5em;
  border-bottom: 1px solid black;
  margin: 0.5em;
  background: transparent;
}

.sheet-att {
  position: relative;
}

.sheet-main-grid {
  margin: 1.5em;
  min-width: 675px;
  display: grid;
  grid-template-columns: 30% 30% 30%;
  grid-column-gap: 5%;
  grid-template-rows: auto auto auto auto auto auto auto;
}
/* cells */
.sheet-cell-01 { grid-area: 1 / 1 / 1 / 1; }
.sheet-cell-02 { grid-area: 1 / 2 / 1 / 2; }
.sheet-cell-03 { grid-area: 1 / 3 / 1 / 3; }
.sheet-cell-04 { grid-area: 2 / 1 / 2 / 4; }
.sheet-cell-05 { grid-area: 3 / 1 / 3 / 1; } /* physical attributes */
.sheet-cell-06 { grid-area: 3 / 2 / 3 / 2; }
.sheet-cell-07 { grid-area: 3 / 3 / 3 / 3; }
.sheet-cell-08 { grid-area: 4 / 1 / 4 / 4; }
.sheet-cell-09 { grid-area: 5 / 1 / 5 / 1; } /* talents */
.sheet-cell-10 { grid-area: 5 / 2 / 5 / 2; }
.sheet-cell-11 { grid-area: 5 / 3 / 5 / 3; }
.sheet-cell-12 { grid-area: 6 / 1 / 6 / 4; }
.sheet-cell-13 { grid-area: 7 / 1 / 7 / 1; } /* backgrounds / Charms */
.sheet-cell-14 { grid-area: 7 / 2 / 7 / 2; } /* Intimacies / Essence / Willpower / etc */
.sheet-cell-15 { grid-area: 7 / 3 / 7 / 3; } /* merits & flaws / health / Anima / gear */
/* stop cells */

.sheet-subgrid-a {
  display: grid;
  grid-template-columns: 100%;
/*  grid-template-rows: 80% 20%; */
}
.sheet-subgrid-b {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto auto auto auto;
}
.sheet-subgrid-c {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto auto auto auto auto;
}
.sheet-cell-a1 { grid-area: 1 / 1 / 1 / 1; }
.sheet-cell-a2 { grid-area: 2 / 1 / 2 / 1; }
.sheet-cell-b1 { grid-area: 1 / 1 / 1 / 3; }
.sheet-cell-b2 { grid-area: 2 / 1 / 2 / 3; }
.sheet-cell-b3 { grid-area: 3 / 1 / 3 / 3; }
.sheet-cell-b4 { grid-area: 4 / 1 / 4 / 1; }
.sheet-cell-b5 { grid-area: 4 / 2 / 4 / 2; }
.sheet-cell-b6 { grid-area: 6 / 1 / 6 / 3; }
.sheet-cell-b7 { grid-area: 5 / 1 / 5 / 3; }
.sheet-cell-c1 { grid-area: 2 / 1 / 2 / 1; }
.sheet-cell-c2 { grid-area: 3 / 1 / 3 / 1; }
.sheet-cell-c3 { grid-area: 4 / 1 / 4 / 1; }
.sheet-cell-c4 { grid-area: 5 / 1 / 5 / 1; }
.sheet-cell-c5 { grid-area: 1 / 1 / 1 / 1; }

.sheet-flex-cols {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
}

.sheet-flex-cols > img {
  max-height: 100px;
  margin-bottom: 1em;
}

.sheet-col {
  width: 25vw;
}

.sheet-col h3 {
  text-align: center;
}

.sheet-flex-cols > .sheet-col  label,
.sheet-flex-cols > .sheet-col  .sheet-att {
  max-width: 325px;
  width: 25vw;
  min-width: 218px;
  position: relative;
  display: block;
  min-height: 1.5em;
}

.sheet-flex-cols > .sheet-col > label input,
.sheet-flex-cols > .sheet-col > label select,
.sheet-dot-group {
  position: absolute;
  right: 0;
}

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

.sheet-col > .sheet-att {
  position: relative;
}

.sheet-att > h4 {
  margin: 0;
  display: inline-block;
}

.sheet-ta {
  width: 100%;
  min-height: 3em;
  height: 5em;
}

.sheet-short-height {
  min-height: 3em;
  height: 3em;
}

.sheet-short-width {
  width: 2em;
}

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

.sheet-split {
  display: flex;
}

.sheet-split > div {
  flex-basis: 50%;
}

/* Health Grid */
.sheet-health-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(8, auto);
}

.sheet-g-label-bruised {
  grid-area: 1 / 1 / 1 / 1;
}
.sheet-g-label-hurt {
  grid-area: 2 / 1 / 2 / 1;
  background: lightgray;
}
.sheet-g-label-injured {
  grid-area: 3 / 1 / 3 / 1;
}
.sheet-g-label-wounded {
  grid-area: 4 / 1 / 6 / 1;
  background: lightgray;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sheet-g-label-mauled {
  grid-area: 6 / 1 / 6 / 1;
}
.sheet-g-label-crippled {
  grid-area: 7 / 1 / 7 / 1;
  background: lightgray;
}
.sheet-g-label-incapacitated {
  grid-area: 8 / 1 / 8 / 7;
}

.sheet-g-b1 { grid-area: 1 / 7 / 1 / 7; }
.sheet-g-b2 { grid-area: 1 / 6 / 1 / 6; }
.sheet-g-b3 { grid-area: 1 / 5 / 1 / 5; }
.sheet-g-b4 { grid-area: 1 / 4 / 1 / 4; }
.sheet-g-b5 { grid-area: 1 / 3 / 1 / 3; }
.sheet-g-b6 { grid-area: 1 / 2 / 1 / 2; }

div[class^=sheet-g-h] { background: lightgray; }
.sheet-g-h1 { grid-area: 2 / 7 / 2 / 7; }
.sheet-g-h2 { grid-area: 2 / 6 / 2 / 6; }
.sheet-g-h3 { grid-area: 2 / 5 / 2 / 5; }
.sheet-g-h4 { grid-area: 2 / 4 / 2 / 4; }
.sheet-g-h5 { grid-area: 2 / 3 / 2 / 3; }
.sheet-g-h6 { grid-area: 2 / 2 / 2 / 2; }

.sheet-g-i1 { grid-area: 3 / 7 / 3 / 7; }
.sheet-g-i2 { grid-area: 3 / 6 / 3 / 6; }
.sheet-g-i3 { grid-area: 3 / 5 / 3 / 5; }
.sheet-g-i4 { grid-area: 3 / 4 / 3 / 4; }
.sheet-g-i5 { grid-area: 3 / 3 / 3 / 3; }
.sheet-g-i6 { grid-area: 3 / 2 / 3 / 2; }

div[class^=sheet-g-w] { background: lightgray; }
.sheet-g-w1 { grid-area: 4 / 7 / 6 / 7; 
  display: flex;
  flex-direction: column;
  justify-content: center;}
.sheet-g-w2 { grid-area: 4 / 6 / 4 / 6; }
.sheet-g-w4 { grid-area: 4 / 5 / 4 / 5; }
.sheet-g-w6 { grid-area: 4 / 4 / 4 / 4; }
.sheet-g-w8 { grid-area: 4 / 3 / 4 / 3; }
.sheet-g-w10 { grid-area: 4 / 2 / 4 / 2; }

.sheet-g-w3 { grid-area: 5 / 6 / 5 / 6; }
.sheet-g-w5 { grid-area: 5 / 5 / 5 / 5; }
.sheet-g-w7 { grid-area: 5 / 4 / 5 / 4; }
.sheet-g-w9 { grid-area: 5 / 3 / 5 / 3; }
.sheet-g-w11 { grid-area: 5 / 2 / 5 / 2; }

.sheet-g-m1 { grid-area: 6 / 7 / 6 / 7; }
.sheet-g-m2 { grid-area: 6 / 6 / 6 / 6; }
.sheet-g-m3 { grid-area: 6 / 5 / 6 / 5; }
.sheet-g-m4 { grid-area: 6 / 4 / 6 / 4; }
.sheet-g-m5 { grid-area: 6 / 3 / 6 / 3; }
.sheet-g-m6 { grid-area: 6 / 2 / 6 / 2; }

div[class^=sheet-g-c] { background: lightgray; }
.sheet-g-c1 { grid-area: 7 / 7 / 7 / 7; }
.sheet-g-c2 { grid-area: 7 / 6 / 7 / 6; }
.sheet-g-c3 { grid-area: 7 / 5 / 7 / 5; }
.sheet-g-c4 { grid-area: 7 / 4 / 7 / 4; }
.sheet-g-c5 { grid-area: 7 / 3 / 7 / 3; }
.sheet-g-c6 { grid-area: 7 / 2 / 7 / 2; }

.sheet-g-incap { grid-area: 8 / 7 / 8 / 7; }


/**
 * Grabbed from TheAaron's Exalted 3 sheet
 */

div.sheet-damage-box { margin-left: 2px; }
div.sheet-damage-box,
div.sheet-damage-box input[class^=sheet-dots],
div.sheet-damage-box input[class^=sheet-dots] + span {
    width: 20px;
    height: 20px;
    margin: auto;
}

input[class^=sheet-dots],
input[class^=sheet-dots] + span,
input[class^=sheet-dots] + span::before {
    position: absolute;
    top: 0;
    left: 0;
}

div.sheet-dots {
    display: inline-block;
    position: absolute;
    padding: 0;
    right: 15px;
}

div.sheet-dots-full,
div.sheet-damage-box,
div.sheet-resource-box {
    position: relative;
}

input[class^=sheet-dots] + span {
    display: inline-block;
    z-index: 0;
}

input[class^=sheet-dots] {
    opacity: 0;
    z-index: 1;
}

input.sheet-dots0 { z-index: 2; }
.sheet-layer4 input.sheet-dots0 { z-index: 6; }
.sheet-layer6 input.sheet-dots0 { z-index: 8; }

div.sheet-damage-box input.sheet-dots0:checked + span::before { content: "" }
div.sheet-damage-box input.sheet-dots1:checked + span::before { content: "∕" }
div.sheet-damage-box input.sheet-dots2:checked + span::before { content: "✕" }
div.sheet-damage-box input.sheet-dots3:checked + span::before { content: "✱" }

div.sheet-resource-box input.sheet-dots0:checked + span::before { content: "" }
div.sheet-resource-box input.sheet-dots1:checked + span::before { content: "✕" }
div.sheet-resource-box input.sheet-dots-blank:checked + span::before { 
  content: " ";
  background: black; 
}

div.sheet-resource-box input[class^=sheet-dots] + span::before,
div.sheet-damage-box input[class^=sheet-dots] + span::before {
  border: 1px solid black;
  width: 15px;
  height: 15px;
  display: inline-block;
  text-align: center;
  margin: 1px;
}

input.sheet-dots0 { z-index: 2; }
.sheet-layer4 input.sheet-dots0 { z-index: 6; }
.sheet-layer6 input.sheet-dots0 { z-index: 8; }

input.sheet-dots0:checked ~ input.sheet-dots1,
input.sheet-dots1:checked ~ input.sheet-dots2,
input.sheet-dots2:checked ~ input.sheet-dots3,
input.sheet-dots3:checked ~ input.sheet-dots4 { z-index: 3; }
.sheet-layer4 input.sheet-dots0:checked ~ input.sheet-dots1,
.sheet-layer4 input.sheet-dots1:checked ~ input.sheet-dots2,
.sheet-layer4 input.sheet-dots2:checked ~ input.sheet-dots3,
.sheet-layer4 input.sheet-dots3:checked ~ input.sheet-dots4 { z-index: 6; }
.sheet-layer6 input.sheet-dots0:checked ~ input.sheet-dots1,
.sheet-layer6 input.sheet-dots1:checked ~ input.sheet-dots2,
.sheet-layer6 input.sheet-dots2:checked ~ input.sheet-dots3,
.sheet-layer6 input.sheet-dots3:checked ~ input.sheet-dots4 { z-index: 8; }

input.sheet-dots0,
input[class^=sheet-dots]:checked + span + input { cursor: pointer; }

/* Hide actual dot/checkbox */
input[type="radio"]:not([class^=sheet-dots]),
input[type="checkbox"]
{
  position: absolute;
  opacity: 0;
  width:15px;
  cursor: pointer;
  z-index: 1;
  margin-top: 6px;
}

/* Styles common to fake dot and checkbox */
input[type="radio"]:not([class^=sheet-dots]) + span::before,
input[type="checkbox"] + span::before
{
  border: solid 1px #a8a8a8;
  line-height: 14px;
  text-align: middle;
  display: inline-block;
  vertical-align: middle;
  
  -moz-box-shadow: 0 0 2px #ccc;
  -webkit-box-shadow: 0 0 2px #ccc;
  box-shadow: 0 0 2px #ccc;
  
  background: #f6f6f6;
  background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
  background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
  background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
  background: -o-radial-gradient(#f6f6f6, #dfdfdf);
  background: radial-gradient(#f6f6f6, #dfdfdf);
}

/* Styles unique to fake dot (checked or left of checked) */
input[type="radio"]:not([class^=sheet-dots]) + span::before
{
  content: "•";
  /* content: "\2022"; */
  width: 12px;
  height: 12px;
  font-size: 36px;
  
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

/* Styles unique to fake checkbox (unchecked) */
input[type="checkbox"] + span::before
{
  position:relative;
  content: "";
  width: 14px;
  height: 14px;
  font-size: 12px;
  
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

/* Styles unique to fake checkbox (checked) */
input[type="checkbox"]:checked + span::before
{
  content: "✓";
  /* content: "\2713"; */
  font-size: larger;
  
  -moz-box-shadow: 0 0 2px transparent;
  -webkit-box-shadow: 0 0 2px transparent;
  box-shadow: 0 0 2px transparent;
}

/* Remove dot from all radios _after_ selected one */
input[type="radio"]:not([class^=sheet-dots]):checked ~ input[type="radio"] + span::before
{    
  content: "";
}

input.sheet-used+span::before
{
  content: "✖";
  /* content: "×"; */
  width: 12px;
  height: 12px;
  font-size: 12px;
  
  -moz-border-radius: 0%;
  -webkit-border-radius: 0%;
  border-radius: 0%;
}

input[type=radio].sheet-zero:checked + span::before
{
  opacity: 0;
}

input[type=radio].sheet-zero:hover + span::before
{
  opacity: 1;
}

input[type=radio].sheet-zero + span::before
{
  font-size: 16px;
  content: "✖";
  /* content: "\2716"; */
  opacity: 0.25;
}

.sheet-center input[type=radio]:checked + span::before {
  width: 13px;
}

.sheet-r-row.sheet-1 {
  margin-top: 1em;
}

.sheet-r-row {
  display: flex;
  justify-content: space-around;
}

.sheet-r-row > div {
  width: 20px;
  height: 20px;
}

.itemcontrol {
  z-index: 99
}

.sheet-attacks .sheet-attack input.sheet-fullwidth {
  width: 100%;
  max-width: 100%;
  text-align: center;
  font-size: large;
}
.sheet-attacks .sheet-filler > div:first-of-type {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.sheet-attack {
  width: 15em;
}