roll20-character-sheets/Astra Odyssey/astraodyssey.css

.sheet-charasheet-wrap ::-webkit-scrollbar {
  width: 6px;
}
.sheet-charasheet-wrap ::-webkit-scrollbar-track {
  background: transparent;
}
.sheet-charasheet-wrap ::-webkit-scrollbar-thumb {
  background: var(--ast-c-sub);
  border-radius: 3px;
}
.sheet-charasheet-wrap ::-webkit-scrollbar-thumb:hover {
  background: var(--ast-c-text);
}
.sheet-charasheet-wrap * {
  box-sizing: border-box;
}
.sheet-charasheet-wrap input, .sheet-charasheet-wrap select, .sheet-charasheet-wrap textarea, .sheet-charasheet-wrap button, .sheet-charasheet-wrap label {
  font-family: inherit;
  font-size: inherit;
  background: transparent;
  border: none;
  font-weight: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border-radius: 0;
}
.sheet-charasheet-wrap textarea {
  resize: vertical;
  height: unset;
  scrollbar-width: thin;
}
.sheet-charasheet-wrap textarea {
  width: 100%;
  min-width: 0;
}
.sheet-charasheet-wrap input {
  min-width: 0;
}
.sheet-charasheet-wrap input:focus, .sheet-charasheet-wrap select:focus, .sheet-charasheet-wrap textarea:focus, .sheet-charasheet-wrap button:focus {
  outline: none;
}
.sheet-charasheet-wrap input[type=text] {
  width: 100%;
}
.sheet-charasheet-wrap input[type=number], .sheet-charasheet-wrap input[type=number]:hover, .sheet-charasheet-wrap input[type=number]:focus {
  -moz-appearance: textfield;
  appearance: textfield;
}
.sheet-charasheet-wrap input[type=number]::-webkit-outer-spin-button, .sheet-charasheet-wrap input[type=number]::-webkit-inner-spin-button, .sheet-charasheet-wrap input[type=number]:hover::-webkit-outer-spin-button, .sheet-charasheet-wrap input[type=number]:hover::-webkit-inner-spin-button, .sheet-charasheet-wrap input[type=number]:focus::-webkit-outer-spin-button, .sheet-charasheet-wrap input[type=number]:focus::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.sheet-charasheet-wrap .sheet-conrow button[type=roll] {
  font-weight: inherit;
  color: inherit;
  margin: 0;
  text-shadow: none;
  font-size: inherit;
  line-height: inherit;
}
.sheet-charasheet-wrap .sheet-conrow button[type=roll]::before {
  content: "✦";
}

.sheet-charasheet-wrap, .sheet-rolltemplate-astra {
  --ast-c-text:#000000;
  --ast-c-bg:#ffffff;
  --ast-c-sub:#a0a0a0;
  --ast-c-fumble: #722F37;
  --ast-c-fail: #E57373;
  --ast-c-success: #81C784;
  --ast-c-critical: #2E7D32;
}

.sheet-charasheet-wrap {
  box-sizing: border-box;
  width: 850px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--ast-c-sub);
  margin: -10px -10px 0 -10px;
  position: relative;
}

.sheet-box {
  border: 1px solid var(--ast-c-sub);
  border-radius: 2px;
  padding: 15px 5px 5px 5px;
  margin-top: 10px;
  position: relative;
}
.sheet-box .box-label {
  position: absolute;
  transform: translateY(-50%);
  width: fit-content;
  top: 0;
  font-size: 14px;
  font-weight: bold;
  color: var(--ast-c-text);
  display: inline-block;
  padding: 0 6px !important;
  background: var(--ast-c-bg) !important;
}

.sheet-conrow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  align-items: start;
}

.sheet-rep-item {
  border-bottom: 1px solid var(--ast-c-text);
  margin-bottom: 2px;
  line-height: 1;
}
.sheet-rep-item textarea, .sheet-rep-item input[type=text] {
  padding-left: 4px;
}

.sheet-charasheet-wrap .sheet-conrow .smlbl {
  font-size: 12px !important;
  align-self: center;
  color: var(--ast-c-bg) !important;
  background: var(--ast-c-text);
  text-align: center;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sheet-charasheet-wrap [name=attr_player] {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
  font-size: 11px;
  height: 16px !important;
  padding: 0 6px;
  color: var(--ast-c-sub);
}

.sheet-section-character {
  grid-column: span 2;
  position: relative;
}
.sheet-section-character input[name=attr_character_name] {
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  padding: 4px 8px;
  border-radius: 10px 10px 0 0;
  background: var(--ast-c-text);
  color: var(--ast-c-bg);
  height: 30px;
}

.sheet-chara-avatar {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 1px solid var(--ast-c-text);
}

.sheet-fatality {
  display: flex;
  margin-bottom: 4px;
  background-color: var(--ast-c-sub);
  border-radius: 2px;
  color: var(--ast-c-text);
  padding: 2px 4px;
}
.sheet-fatality input {
  font-style: italic;
}

.sheet-section-info {
  grid-column: span 4;
}

.sheet-stat {
  margin-bottom: 2px;
  display: grid;
  grid-template-columns: 50px 220px 110px minmax(0, 1fr);
  gap: 10px;
  position: relative;
  align-items: center;
}
.sheet-stat.stat-hp {
  --bar-color: #8b4a47;
  --inj-color: #4d1c1c;
}
.sheet-stat.stat-san {
  --bar-color: #5a7c65;
}
.sheet-stat.stat-mp {
  --bar-color: #4a6b8a;
  grid-template-columns: 50px 220px auto 1fr;
}
.sheet-stat .sheet-hp-bar, .sheet-stat .sheet-san-bar, .sheet-stat .sheet-mp-bar {
  width: 100%;
}

.sheet-stat .sheet-stat-input {
  display: flex;
  align-items: center;
  line-height: 1;
  gap: 3px;
}
.sheet-stat .sheet-stat-input input[type=number] {
  text-align: center;
  width: 30px;
  border: 1px solid var(--ast-c-sub);
  border-radius: 3px;
  font-size: 14px;
  padding: 2px 0;
}
.sheet-stat .sheet-stat-input input[type=number][name=attr_hp_injury] {
  background: var(--bar-color);
  color: var(--ast-c-bg);
}

.sheet-bar + div {
  position: relative;
  width: 100%;
  height: 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}
.sheet-bar + div::before {
  content: "";
  transition: width 0.3s ease;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: var(--bar-color);
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.sheet-bar + div::after {
  position: absolute;
  left: 4px;
  color: var(--ast-c-bg);
  font-size: 10px;
  width: 30px;
  height: 100%;
}

.sheet-hp-bar input[name=attr_injury_bar] + span {
  height: calc(100% + 4px);
  width: 1px;
  top: -2px;
  position: absolute;
  background: var(--inj-color);
  font-size: 10px;
  text-indent: 4px;
  display: flex;
  align-items: center;
  cursor: default;
}

.sheet-hp-bar input[name=attr_injury_bar][value="0"] + span {
  right: 0%;
  display: none;
}

.sheet-hp-bar input[name=attr_injury_bar][value="1"] + span {
  right: 1%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="2"] + span {
  right: 2%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="3"] + span {
  right: 3%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="4"] + span {
  right: 4%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="5"] + span {
  right: 5%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="6"] + span {
  right: 6%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="7"] + span {
  right: 7%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="8"] + span {
  right: 8%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="9"] + span {
  right: 9%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="10"] + span {
  right: 10%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="11"] + span {
  right: 11%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="12"] + span {
  right: 12%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="13"] + span {
  right: 13%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="14"] + span {
  right: 14%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="15"] + span {
  right: 15%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="16"] + span {
  right: 16%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="17"] + span {
  right: 17%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="18"] + span {
  right: 18%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="19"] + span {
  right: 19%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="20"] + span {
  right: 20%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="21"] + span {
  right: 21%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="22"] + span {
  right: 22%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="23"] + span {
  right: 23%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="24"] + span {
  right: 24%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="25"] + span {
  right: 25%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="26"] + span {
  right: 26%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="27"] + span {
  right: 27%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="28"] + span {
  right: 28%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="29"] + span {
  right: 29%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="30"] + span {
  right: 30%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="31"] + span {
  right: 31%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="32"] + span {
  right: 32%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="33"] + span {
  right: 33%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="34"] + span {
  right: 34%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="35"] + span {
  right: 35%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="36"] + span {
  right: 36%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="37"] + span {
  right: 37%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="38"] + span {
  right: 38%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="39"] + span {
  right: 39%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="40"] + span {
  right: 40%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="41"] + span {
  right: 41%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="42"] + span {
  right: 42%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="43"] + span {
  right: 43%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="44"] + span {
  right: 44%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="45"] + span {
  right: 45%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="46"] + span {
  right: 46%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="47"] + span {
  right: 47%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="48"] + span {
  right: 48%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="49"] + span {
  right: 49%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="50"] + span {
  right: 50%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="51"] + span {
  right: 51%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="52"] + span {
  right: 52%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="53"] + span {
  right: 53%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="54"] + span {
  right: 54%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="55"] + span {
  right: 55%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="56"] + span {
  right: 56%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="57"] + span {
  right: 57%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="58"] + span {
  right: 58%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="59"] + span {
  right: 59%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="60"] + span {
  right: 60%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="61"] + span {
  right: 61%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="62"] + span {
  right: 62%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="63"] + span {
  right: 63%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="64"] + span {
  right: 64%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="65"] + span {
  right: 65%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="66"] + span {
  right: 66%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="67"] + span {
  right: 67%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="68"] + span {
  right: 68%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="69"] + span {
  right: 69%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="70"] + span {
  right: 70%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="71"] + span {
  right: 71%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="72"] + span {
  right: 72%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="73"] + span {
  right: 73%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="74"] + span {
  right: 74%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="75"] + span {
  right: 75%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="76"] + span {
  right: 76%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="77"] + span {
  right: 77%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="78"] + span {
  right: 78%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="79"] + span {
  right: 79%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="80"] + span {
  right: 80%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="81"] + span {
  right: 81%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="82"] + span {
  right: 82%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="83"] + span {
  right: 83%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="84"] + span {
  right: 84%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="85"] + span {
  right: 85%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="86"] + span {
  right: 86%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="87"] + span {
  right: 87%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="88"] + span {
  right: 88%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="89"] + span {
  right: 89%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="90"] + span {
  right: 90%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="91"] + span {
  right: 91%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="92"] + span {
  right: 92%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="93"] + span {
  right: 93%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="94"] + span {
  right: 94%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="95"] + span {
  right: 95%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="96"] + span {
  right: 96%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="97"] + span {
  right: 97%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="98"] + span {
  right: 98%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="99"] + span {
  right: 99%;
}

.sheet-hp-bar input[name=attr_injury_bar][value="100"] + span {
  right: 100%;
}

.sheet-bar[value="0"] + div::before {
  width: 0%;
}

.sheet-bar[value="0"] + div::after {
  content: "0%";
}

.sheet-bar[value="1"] + div::before {
  width: 1%;
}

.sheet-bar[value="1"] + div::after {
  content: "1%";
}

.sheet-bar[value="2"] + div::before {
  width: 2%;
}

.sheet-bar[value="2"] + div::after {
  content: "2%";
}

.sheet-bar[value="3"] + div::before {
  width: 3%;
}

.sheet-bar[value="3"] + div::after {
  content: "3%";
}

.sheet-bar[value="4"] + div::before {
  width: 4%;
}

.sheet-bar[value="4"] + div::after {
  content: "4%";
}

.sheet-bar[value="5"] + div::before {
  width: 5%;
}

.sheet-bar[value="5"] + div::after {
  content: "5%";
}

.sheet-bar[value="6"] + div::before {
  width: 6%;
}

.sheet-bar[value="6"] + div::after {
  content: "6%";
}

.sheet-bar[value="7"] + div::before {
  width: 7%;
}

.sheet-bar[value="7"] + div::after {
  content: "7%";
}

.sheet-bar[value="8"] + div::before {
  width: 8%;
}

.sheet-bar[value="8"] + div::after {
  content: "8%";
}

.sheet-bar[value="9"] + div::before {
  width: 9%;
}

.sheet-bar[value="9"] + div::after {
  content: "9%";
}

.sheet-bar[value="10"] + div::before {
  width: 10%;
}

.sheet-bar[value="10"] + div::after {
  content: "10%";
}

.sheet-bar[value="11"] + div::before {
  width: 11%;
}

.sheet-bar[value="11"] + div::after {
  content: "11%";
}

.sheet-bar[value="12"] + div::before {
  width: 12%;
}

.sheet-bar[value="12"] + div::after {
  content: "12%";
}

.sheet-bar[value="13"] + div::before {
  width: 13%;
}

.sheet-bar[value="13"] + div::after {
  content: "13%";
}

.sheet-bar[value="14"] + div::before {
  width: 14%;
}

.sheet-bar[value="14"] + div::after {
  content: "14%";
}

.sheet-bar[value="15"] + div::before {
  width: 15%;
}

.sheet-bar[value="15"] + div::after {
  content: "15%";
}

.sheet-bar[value="16"] + div::before {
  width: 16%;
}

.sheet-bar[value="16"] + div::after {
  content: "16%";
}

.sheet-bar[value="17"] + div::before {
  width: 17%;
}

.sheet-bar[value="17"] + div::after {
  content: "17%";
}

.sheet-bar[value="18"] + div::before {
  width: 18%;
}

.sheet-bar[value="18"] + div::after {
  content: "18%";
}

.sheet-bar[value="19"] + div::before {
  width: 19%;
}

.sheet-bar[value="19"] + div::after {
  content: "19%";
}

.sheet-bar[value="20"] + div::before {
  width: 20%;
}

.sheet-bar[value="20"] + div::after {
  content: "20%";
}

.sheet-bar[value="21"] + div::before {
  width: 21%;
}

.sheet-bar[value="21"] + div::after {
  content: "21%";
}

.sheet-bar[value="22"] + div::before {
  width: 22%;
}

.sheet-bar[value="22"] + div::after {
  content: "22%";
}

.sheet-bar[value="23"] + div::before {
  width: 23%;
}

.sheet-bar[value="23"] + div::after {
  content: "23%";
}

.sheet-bar[value="24"] + div::before {
  width: 24%;
}

.sheet-bar[value="24"] + div::after {
  content: "24%";
}

.sheet-bar[value="25"] + div::before {
  width: 25%;
}

.sheet-bar[value="25"] + div::after {
  content: "25%";
}

.sheet-bar[value="26"] + div::before {
  width: 26%;
}

.sheet-bar[value="26"] + div::after {
  content: "26%";
}

.sheet-bar[value="27"] + div::before {
  width: 27%;
}

.sheet-bar[value="27"] + div::after {
  content: "27%";
}

.sheet-bar[value="28"] + div::before {
  width: 28%;
}

.sheet-bar[value="28"] + div::after {
  content: "28%";
}

.sheet-bar[value="29"] + div::before {
  width: 29%;
}

.sheet-bar[value="29"] + div::after {
  content: "29%";
}

.sheet-bar[value="30"] + div::before {
  width: 30%;
}

.sheet-bar[value="30"] + div::after {
  content: "30%";
}

.sheet-bar[value="31"] + div::before {
  width: 31%;
}

.sheet-bar[value="31"] + div::after {
  content: "31%";
}

.sheet-bar[value="32"] + div::before {
  width: 32%;
}

.sheet-bar[value="32"] + div::after {
  content: "32%";
}

.sheet-bar[value="33"] + div::before {
  width: 33%;
}

.sheet-bar[value="33"] + div::after {
  content: "33%";
}

.sheet-bar[value="34"] + div::before {
  width: 34%;
}

.sheet-bar[value="34"] + div::after {
  content: "34%";
}

.sheet-bar[value="35"] + div::before {
  width: 35%;
}

.sheet-bar[value="35"] + div::after {
  content: "35%";
}

.sheet-bar[value="36"] + div::before {
  width: 36%;
}

.sheet-bar[value="36"] + div::after {
  content: "36%";
}

.sheet-bar[value="37"] + div::before {
  width: 37%;
}

.sheet-bar[value="37"] + div::after {
  content: "37%";
}

.sheet-bar[value="38"] + div::before {
  width: 38%;
}

.sheet-bar[value="38"] + div::after {
  content: "38%";
}

.sheet-bar[value="39"] + div::before {
  width: 39%;
}

.sheet-bar[value="39"] + div::after {
  content: "39%";
}

.sheet-bar[value="40"] + div::before {
  width: 40%;
}

.sheet-bar[value="40"] + div::after {
  content: "40%";
}

.sheet-bar[value="41"] + div::before {
  width: 41%;
}

.sheet-bar[value="41"] + div::after {
  content: "41%";
}

.sheet-bar[value="42"] + div::before {
  width: 42%;
}

.sheet-bar[value="42"] + div::after {
  content: "42%";
}

.sheet-bar[value="43"] + div::before {
  width: 43%;
}

.sheet-bar[value="43"] + div::after {
  content: "43%";
}

.sheet-bar[value="44"] + div::before {
  width: 44%;
}

.sheet-bar[value="44"] + div::after {
  content: "44%";
}

.sheet-bar[value="45"] + div::before {
  width: 45%;
}

.sheet-bar[value="45"] + div::after {
  content: "45%";
}

.sheet-bar[value="46"] + div::before {
  width: 46%;
}

.sheet-bar[value="46"] + div::after {
  content: "46%";
}

.sheet-bar[value="47"] + div::before {
  width: 47%;
}

.sheet-bar[value="47"] + div::after {
  content: "47%";
}

.sheet-bar[value="48"] + div::before {
  width: 48%;
}

.sheet-bar[value="48"] + div::after {
  content: "48%";
}

.sheet-bar[value="49"] + div::before {
  width: 49%;
}

.sheet-bar[value="49"] + div::after {
  content: "49%";
}

.sheet-bar[value="50"] + div::before {
  width: 50%;
}

.sheet-bar[value="50"] + div::after {
  content: "50%";
}

.sheet-bar[value="51"] + div::before {
  width: 51%;
}

.sheet-bar[value="51"] + div::after {
  content: "51%";
}

.sheet-bar[value="52"] + div::before {
  width: 52%;
}

.sheet-bar[value="52"] + div::after {
  content: "52%";
}

.sheet-bar[value="53"] + div::before {
  width: 53%;
}

.sheet-bar[value="53"] + div::after {
  content: "53%";
}

.sheet-bar[value="54"] + div::before {
  width: 54%;
}

.sheet-bar[value="54"] + div::after {
  content: "54%";
}

.sheet-bar[value="55"] + div::before {
  width: 55%;
}

.sheet-bar[value="55"] + div::after {
  content: "55%";
}

.sheet-bar[value="56"] + div::before {
  width: 56%;
}

.sheet-bar[value="56"] + div::after {
  content: "56%";
}

.sheet-bar[value="57"] + div::before {
  width: 57%;
}

.sheet-bar[value="57"] + div::after {
  content: "57%";
}

.sheet-bar[value="58"] + div::before {
  width: 58%;
}

.sheet-bar[value="58"] + div::after {
  content: "58%";
}

.sheet-bar[value="59"] + div::before {
  width: 59%;
}

.sheet-bar[value="59"] + div::after {
  content: "59%";
}

.sheet-bar[value="60"] + div::before {
  width: 60%;
}

.sheet-bar[value="60"] + div::after {
  content: "60%";
}

.sheet-bar[value="61"] + div::before {
  width: 61%;
}

.sheet-bar[value="61"] + div::after {
  content: "61%";
}

.sheet-bar[value="62"] + div::before {
  width: 62%;
}

.sheet-bar[value="62"] + div::after {
  content: "62%";
}

.sheet-bar[value="63"] + div::before {
  width: 63%;
}

.sheet-bar[value="63"] + div::after {
  content: "63%";
}

.sheet-bar[value="64"] + div::before {
  width: 64%;
}

.sheet-bar[value="64"] + div::after {
  content: "64%";
}

.sheet-bar[value="65"] + div::before {
  width: 65%;
}

.sheet-bar[value="65"] + div::after {
  content: "65%";
}

.sheet-bar[value="66"] + div::before {
  width: 66%;
}

.sheet-bar[value="66"] + div::after {
  content: "66%";
}

.sheet-bar[value="67"] + div::before {
  width: 67%;
}

.sheet-bar[value="67"] + div::after {
  content: "67%";
}

.sheet-bar[value="68"] + div::before {
  width: 68%;
}

.sheet-bar[value="68"] + div::after {
  content: "68%";
}

.sheet-bar[value="69"] + div::before {
  width: 69%;
}

.sheet-bar[value="69"] + div::after {
  content: "69%";
}

.sheet-bar[value="70"] + div::before {
  width: 70%;
}

.sheet-bar[value="70"] + div::after {
  content: "70%";
}

.sheet-bar[value="71"] + div::before {
  width: 71%;
}

.sheet-bar[value="71"] + div::after {
  content: "71%";
}

.sheet-bar[value="72"] + div::before {
  width: 72%;
}

.sheet-bar[value="72"] + div::after {
  content: "72%";
}

.sheet-bar[value="73"] + div::before {
  width: 73%;
}

.sheet-bar[value="73"] + div::after {
  content: "73%";
}

.sheet-bar[value="74"] + div::before {
  width: 74%;
}

.sheet-bar[value="74"] + div::after {
  content: "74%";
}

.sheet-bar[value="75"] + div::before {
  width: 75%;
}

.sheet-bar[value="75"] + div::after {
  content: "75%";
}

.sheet-bar[value="76"] + div::before {
  width: 76%;
}

.sheet-bar[value="76"] + div::after {
  content: "76%";
}

.sheet-bar[value="77"] + div::before {
  width: 77%;
}

.sheet-bar[value="77"] + div::after {
  content: "77%";
}

.sheet-bar[value="78"] + div::before {
  width: 78%;
}

.sheet-bar[value="78"] + div::after {
  content: "78%";
}

.sheet-bar[value="79"] + div::before {
  width: 79%;
}

.sheet-bar[value="79"] + div::after {
  content: "79%";
}

.sheet-bar[value="80"] + div::before {
  width: 80%;
}

.sheet-bar[value="80"] + div::after {
  content: "80%";
}

.sheet-bar[value="81"] + div::before {
  width: 81%;
}

.sheet-bar[value="81"] + div::after {
  content: "81%";
}

.sheet-bar[value="82"] + div::before {
  width: 82%;
}

.sheet-bar[value="82"] + div::after {
  content: "82%";
}

.sheet-bar[value="83"] + div::before {
  width: 83%;
}

.sheet-bar[value="83"] + div::after {
  content: "83%";
}

.sheet-bar[value="84"] + div::before {
  width: 84%;
}

.sheet-bar[value="84"] + div::after {
  content: "84%";
}

.sheet-bar[value="85"] + div::before {
  width: 85%;
}

.sheet-bar[value="85"] + div::after {
  content: "85%";
}

.sheet-bar[value="86"] + div::before {
  width: 86%;
}

.sheet-bar[value="86"] + div::after {
  content: "86%";
}

.sheet-bar[value="87"] + div::before {
  width: 87%;
}

.sheet-bar[value="87"] + div::after {
  content: "87%";
}

.sheet-bar[value="88"] + div::before {
  width: 88%;
}

.sheet-bar[value="88"] + div::after {
  content: "88%";
}

.sheet-bar[value="89"] + div::before {
  width: 89%;
}

.sheet-bar[value="89"] + div::after {
  content: "89%";
}

.sheet-bar[value="90"] + div::before {
  width: 90%;
}

.sheet-bar[value="90"] + div::after {
  content: "90%";
}

.sheet-bar[value="91"] + div::before {
  width: 91%;
}

.sheet-bar[value="91"] + div::after {
  content: "91%";
}

.sheet-bar[value="92"] + div::before {
  width: 92%;
}

.sheet-bar[value="92"] + div::after {
  content: "92%";
}

.sheet-bar[value="93"] + div::before {
  width: 93%;
}

.sheet-bar[value="93"] + div::after {
  content: "93%";
}

.sheet-bar[value="94"] + div::before {
  width: 94%;
}

.sheet-bar[value="94"] + div::after {
  content: "94%";
}

.sheet-bar[value="95"] + div::before {
  width: 95%;
}

.sheet-bar[value="95"] + div::after {
  content: "95%";
}

.sheet-bar[value="96"] + div::before {
  width: 96%;
}

.sheet-bar[value="96"] + div::after {
  content: "96%";
}

.sheet-bar[value="97"] + div::before {
  width: 97%;
}

.sheet-bar[value="97"] + div::after {
  content: "97%";
}

.sheet-bar[value="98"] + div::before {
  width: 98%;
}

.sheet-bar[value="98"] + div::after {
  content: "98%";
}

.sheet-bar[value="99"] + div::before {
  width: 99%;
}

.sheet-bar[value="99"] + div::after {
  content: "99%";
}

.sheet-bar[value="100"] + div::before {
  width: 100%;
  border-radius: 2px;
}

.sheet-bar[value="100"] + div::after {
  content: "100%";
}

.sheet-section-add {
  display: flex;
  height: 24px;
  padding: 2px;
  gap: 2px;
}
.sheet-section-add .smlbl {
  width: unset;
}
.sheet-section-add select {
  width: unset !important;
  height: unset !important;
  background: inherit;
  color: inherit;
}
.sheet-section-add select option {
  background: inherit;
  color: inherit;
}
.sheet-section-add .section-mod {
  border: 1px solid var(--ast-c-sub);
  border-radius: 2px;
  padding: 0 4px;
}
.sheet-section-add .section-mod [name=attr_mod_type] {
  width: 30px;
}
.sheet-section-add .section-mod input[name=attr_mod_dice] {
  width: 30px;
  text-align: center;
}

.sheet-skill .sheet-section-add {
  height: unset;
  margin-right: 10px;
  padding: 6px;
  flex-direction: column;
}
.sheet-skill .sheet-section-add .add-grid {
  display: grid;
  grid-template-columns: 50px auto auto;
  border-bottom: 1px solid;
}
.sheet-skill .sheet-section-add .add-grid:last-child {
  margin-top: 4px;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
  border: none;
}

.sheet-stress-reaction > div {
  display: flex;
  min-height: 22px;
  line-height: 11px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--ast-c-text);
}
.sheet-stress-reaction > div button[type=roll] {
  background: var(--ast-c-text);
  color: var(--ast-c-bg) !important;
  border-top-left-radius: 4px;
}
.sheet-stress-reaction > div input[type=text][name$=_title] {
  width: 80px;
  background: var(--ast-c-text);
  color: var(--ast-c-bg) !important;
  line-height: inherit;
  font-weight: bold;
  text-align: center;
}
.sheet-stress-reaction > div textarea {
  width: 100%;
  padding-left: 6px;
  line-height: 1.5;
}

.sheet-aspect {
  grid-column: span 3;
}
.sheet-aspect .rep-aspect > :first-child {
  display: flex;
  background: var(--ast-c-text);
  color: var(--ast-c-bg);
}
.sheet-aspect .rep-aspect > :first-child input.sheet-rep-title {
  flex-basis: 100%;
  text-align: center;
}
.sheet-aspect .rep-aspect > :nth-child(2) {
  border-bottom: 1px solid var(--ast-c-sub);
}

.sheet-gear {
  grid-column: span 3;
}
.sheet-gear .rep-gear > :first-child {
  display: flex;
  background: var(--ast-c-text);
  color: var(--ast-c-bg);
  height: 22px;
}
.sheet-gear .rep-gear > :first-child select {
  width: unset !important;
  height: unset !important;
  padding: 0 5px;
  background: var(--ast-c-text);
  color: var(--ast-c-bg);
}
.sheet-gear .rep-gear > :first-child select option {
  color: inherit;
  background: inherit;
}
.sheet-gear .rep-gear > :first-child input.sheet-rep-title {
  flex-basis: 100%;
  text-align: left;
}

.sheet-skill-menu .label-menu {
  display: flex;
  gap: 10px;
  margin-bottom: 2px;
}
.sheet-skill-menu .label-menu .smlbl {
  width: 60px;
}
.sheet-skill-menu .label-menu input[type=number] {
  width: 30px;
  text-align: center;
  border: 1px solid var(--ast-c-sub);
  border-radius: 3px;
  font-size: 14px;
  padding: 2px 0;
}
.sheet-skill-menu .smlbl::before {
  margin-top: -5px !important;
}

.sheet-skill-listbox {
  grid-column: span 5;
  margin-left: -10px;
  margin-top: 0 !important;
  padding: 10px;
  gap: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sheet-skill-listbox h4 {
  text-align: center;
  margin-bottom: 5px;
}
.sheet-skill-listbox .skill-each {
  position: relative;
}
.sheet-skill-listbox .skill-each::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  background: var(--ast-c-sub);
  width: 1px;
  height: 100%;
}
.sheet-skill-listbox .skill-each:last-child::after {
  content: unset;
}
.sheet-skill-listbox .rep-skill {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 40px;
  grid-template-rows: 24px;
  margin-bottom: 2px;
  line-height: 1;
}
.sheet-skill-listbox .rep-skill button[type=roll] {
  background: var(--ast-c-text) !important;
  color: var(--ast-c-bg) !important;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.sheet-skill-listbox .rep-skill .sheet-rep-title {
  padding-left: 2px;
  background: var(--ast-c-text);
  color: var(--ast-c-bg);
  display: flex;
  align-items: center;
}
.sheet-skill-listbox .rep-skill input[type=number] {
  text-align: center;
  border: 1px solid var(--ast-c-text);
  font-size: 14px;
  padding: 2px 0;
  width: unset;
}

.sheet-karma {
  grid-column: span 2;
}
.sheet-karma .box-label {
  width: fit-content;
}
.sheet-karma > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 2px 2px 0 0;
  overflow: hidden;
  border: 1px solid var(--ast-c-text);
}
.sheet-karma > div > div:first-child {
  border-right: 1px solid var(--ast-c-sub);
}
.sheet-karma .smlbl {
  flex-direction: column;
  border-radius: 0 !important;
}
.sheet-karma .smlbl span {
  font-size: 14px;
  font-weight: bold;
}
.sheet-karma .smlbl input {
  width: 100%;
  text-align: center;
  padding: 2px 3px;
}
.sheet-karma input[type=number] {
  font-size: 16px;
  font-weight: bold;
  width: 100% !important;
  text-align: center;
  padding-block: 4px;
}
.sheet-karma + div {
  grid-column: span 4;
}

.sheet-relationship {
  grid-column: 1/-1;
}
.sheet-relationship .rep-relationship {
  display: grid;
  grid-template-columns: 172px 172px minmax(0, 1fr);
  border: 1px solid var(--ast-c-text);
  border-radius: 2px 0 0 2px;
  overflow: hidden;
}
.sheet-relationship .rep-relationship input {
  line-height: 2 !important;
  border-right: 1px solid var(--ast-c-sub);
}
.sheet-relationship .rep-relationship .sheet-rep-title {
  font-weight: bold;
  background: var(--ast-c-text);
  color: var(--ast-c-bg);
}
.sheet-relationship .rep-relationship input:last-of-type {
  width: 100%;
  border-right: none;
}
.sheet-relationship .reputation {
  position: absolute;
  left: 100px;
  bottom: 100%;
  right: 10px;
  display: flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--ast-c-sub);
  color: var(--ast-c-text);
  border-radius: 10px;
  gap: 10px;
  transform: translateY(50%);
}
.sheet-relationship .reputation span {
  flex: 1 0 auto;
  font-weight: bold;
  padding: 0px 4px;
}
.sheet-relationship .reputation input {
  width: 100% !important;
  flex: 1 1 100%;
}
.sheet-relationship .reputation > div {
  background: inherit;
  border-radius: 50%;
  position: absolute;
  display: inline-block;
}
.sheet-relationship .reputation > div:first-child {
  width: 14px;
  height: 14px;
  left: -10px;
}
.sheet-relationship .reputation > div:nth-child(2) {
  width: 8px;
  height: 8px;
  left: -22px;
  top: 10px;
}

/* 반복영역 */
.sheet-charasheet-wrap .repcontainer .itemcontrol .pictos {
  font-family: "Pictos" !important;
}
.sheet-charasheet-wrap .repcontrol button {
  font-size: 0 !important;
  padding: 2px;
  line-height: 1;
  box-shadow: none !important;
  transition: all 0.2s ease-in-out;
  text-shadow: none !important;
}
.sheet-charasheet-wrap .repcontrol button:hover {
  background: var(--ast-c-sub);
}
.sheet-charasheet-wrap .repcontrol button::before {
  font-size: 16px !important;
  font-weight: normal;
}
.sheet-charasheet-wrap .repcontrol button.repcontrol_edit::before {
  content: "✎";
}
.sheet-charasheet-wrap .repcontrol button.repcontrol_add::before {
  content: "＋";
}

/* 롤템플릿 */
.sheet-rolltemplate-astra, .sheet-rolltemplate-astra * {
  box-sizing: border-box;
}
.sheet-rolltemplate-astra .sheet-rt-wrap {
  width: 279px;
  max-width: 100%;
  border-radius: 2px;
  padding: 0 5px 5px 5px;
  background: var(--ast-c-bg);
  border: 1px solid var(--ast-c-text);
  color: var(--ast-c-text);
}
.sheet-rolltemplate-astra .sheet-rt-top {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--ast-c-text);
  padding: 4px 0;
  font-size: 12px;
  justify-content: space-between;
}
.sheet-rolltemplate-astra .sheet-rt-top .sheet-rt-charaname {
  flex: 0 1 100%;
  text-align: right;
  word-break: revert-layer;
  white-space: nowrap;
  overflow: hidden;
}
.sheet-rolltemplate-astra .sheet-rt-top .sheet-rt-type {
  flex: 0 0 auto;
  background: var(--ast-c-text);
  color: var(--ast-c-bg);
  padding: 2px 4px;
  border-radius: 2px;
}
.sheet-rolltemplate-astra .sheet-rt-top .sheet-rt-type span.inlinerollresult {
  opacity: 0.5;
  font-size: inherit;
  width: unset;
  height: unset;
  font-weight: inherit;
  background: transparent;
  color: inherit;
  border: none !important;
  padding: 0 0 0 2px;
  pointer-events: none;
}
.sheet-rolltemplate-astra .sheet-rt-top .sheet-rt-type span.inlinerollresult::before {
  content: "(";
  display: inline;
}
.sheet-rolltemplate-astra .sheet-rt-top .sheet-rt-type span.inlinerollresult::after {
  content: ")";
  display: inline;
}
.sheet-rolltemplate-astra .sheet-rt-title {
  font-weight: bold;
  font-size: 16px;
  margin: 8px 0 4px 0;
  text-align: center;
}
.sheet-rolltemplate-astra .sheet-rt-dice {
  text-align: center;
  margin-block: 10px;
}
.sheet-rolltemplate-astra .sheet-rt-dice span.inlinerollresult {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  line-height: 1;
  width: 60px;
  height: 60px;
  border-radius: 4px;
  background: var(--ast-c-text);
  border: none !important;
  color: var(--ast-c-bg);
  box-shadow: 0 0 5px var(--ast-c-sub);
}
.sheet-rolltemplate-astra .sheet-rt-dice.sheet-rt-fullcrit span.inlinerollresult {
  color: var(--ast-c-success);
  box-shadow: 0 0 10px var(--ast-c-success);
}
.sheet-rolltemplate-astra .sheet-rt-dice.sheet-rt-fullfail span.inlinerollresult {
  color: var(--ast-c-fail);
  box-shadow: 0 0 10px var(--ast-c-fail);
}
.sheet-rolltemplate-astra .sheet-rt-result {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 0;
  background: var(--ast-c-text);
  border-radius: 2px;
  font-size: 12px;
}
.sheet-rolltemplate-astra .sheet-rt-result.sheet-rt-fumble {
  background: var(--ast-c-fumble);
  color: var(--ast-c-bg);
  font-weight: bold;
}
.sheet-rolltemplate-astra .sheet-rt-result.sheet-rt-fail {
  background: var(--ast-c-fail);
}
.sheet-rolltemplate-astra .sheet-rt-result.sheet-rt-success {
  background: var(--ast-c-success);
}
.sheet-rolltemplate-astra .sheet-rt-result.sheet-rt-critical {
  background: var(--ast-c-critical);
  color: var(--ast-c-bg);
  font-weight: bold;
}
.sheet-rolltemplate-astra .sheet-rt-desc {
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
  background: var(--ast-c-sub);
  padding: 4px;
  border-radius: 2px;
}