/* General CSS for Lyrian Chronicles character sheet */
.sheet-darkmode .sheetform {
  background: #181818 !important;
}

/* PC/NPC switch */
.charsheet div.sheet-section-pc,
.charsheet div.sheet-section-npc {
  display: none;
}

.charsheet input.sheet-is-npc:checked ~ div.sheet-section-npc,
.charsheet input.sheet-is-npc:not(:checked) ~ div.sheet-section-pc {
  display: block;
}

.charsheet input.sheet-is-npc {
  width: 20%;
  height: 16px;
  cursor: pointer;
  position: relative;
  opacity: 0;
  z-index: 9999;
}

.charsheet span.sheet-is-npc-tab::before {
  content: "Player Sheet";
}

.charsheet span.sheet-is-npc-tab {
  text-align: center;
  display: inline-block;
  width: 20%;
  height: 16px;
  font-size: 9px;
  background: #65763c;
  color: white;
  font-weight: bold;
  border-radius: 4px;
  margin-left: -20%
}

.charsheet input.sheet-is-npc:checked + span.sheet-is-npc-tab {
  background: #93537c;
  color: white;
  border-radius: 4px;
}

.charsheet input.sheet-is-npc:checked + span.sheet-is-npc-tab::before {
  content: "NPC Sheet"
}


/* ROLL BUTTONS */
.charsheet button[type="action"],
.charsheet button[type="roll"] {
  background: none;
  border: 0;
  box-shadow: none;
  font-weight: bold;
  text-transform: uppercase;
  width: 100%;
  line-height: 0.5;
  color: inherit;
  font-size: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  text-align: center;
}
.charsheet button[type="action"]:hover,
.charsheet button[type="roll"]:hover {
  color: #b61037;
}
.sheet-darkmode button[type="action"]:hover,
.sheet-darkmode button[type="roll"]:hover {
  color: #49efc8; /* inverted #b61037 */
}
.charsheet button[type="action"]:focus,
.charsheet button[type="roll"]:focus {
  color: #b61037;
  outline: none;
}
.sheet-darkmode button[type="action"]:focus,
.sheet-darkmode button[type="roll"]:focus {
  color: #49efc8; /* inverted #b61037 */
}
.charsheet button[type="action"]::before,
.charsheet button[type="roll"]::before {
  display: none;
}
.charsheet button[type="action"]:hover,
.charsheet button[type="roll"]:hover {
  background: none !important;
}
.charsheet button[type="roll"]:active {
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: inherit !important;
  border: none !important;
}
/* ROLL BUTTONS */

/* CUSTOM RADIO CHECKBOX START */
.charsheet .custom-radio-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 15px;
}
.charsheet .custom-radio-checkbox input[type="checkbox"] {
  display: none;
}
.charsheet .custom-radio-checkbox label {
  width: 13px;
  height: 13px;
  border: 2px solid #6c6c6c;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.2s;
  margin-bottom: 0px;
  box-sizing: border-box;
  padding: 0px;
}
.sheet-darkmode .charsheet .custom-radio-checkbox label {
  border: 2px solid #0f0f0f;
  background: #ffffff;
}
.charsheet .custom-radio-checkbox input[type="checkbox"]:checked + label::after {
  content: "";
  position: absolute;
  left: -0.5px;
  top: -0.5px;
  width: 11px;
  height: 11px;
  background: #6c6c6c;
  border-radius: 50%;
  display: block;
  box-sizing: border-box;
  margin-bottom: 0px;
}
.sheet-darkmode .charsheet .custom-radio-checkbox input[type="checkbox"]:checked + label::after {
  background: #0f0f0f;
}
.charsheet .custom-radio-checkbox input[type="checkbox"]:checked + label:hover::after {
  background: #b61037;
}
.charsheet .custom-radio-checkbox input[type="checkbox"]:checked + label:active::after{
  background: #ff0000;
}
.sheet-darkmode .charsheet .custom-radio-checkbox input[type="checkbox"]:checked + label:hover::after {
  background: #49efc8; /* inverted #b61037 */
}
.sheet-darkmode .charsheet .custom-radio-checkbox input[type="checkbox"]:checked + label:active::after{
  background: #00ffff; /* inverted #ff0000 */
}
.charsheet .custom-radio-checkbox label:hover {
  border-color: #b61037;
}
.sheet-darkmode .custom-radio-checkbox label:active{
  border-color: #ff0000;
}
.sheet-darkmode .charsheet .custom-radio-checkbox label:hover {
  border-color: #49efc8; /* inverted #b61037 */
}
.sheet-darkmode .charsheet .custom-radio-checkbox label:active{
  border-color: #00ffff; /* inverted #ff0000 */
}
.charsheet .custom-radio-checkbox span {
  font-size: 11px;
}
/* CUSTOM RADIO CHECKBOX END */

/* Hide number input spinners for Chrome, Safari, Edge, Opera */
.charsheet input[type="number"]::-webkit-outer-spin-button,
.charsheet input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide number input spinners for Firefox */
.charsheet input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}


/* GENERAL INPUT COMPONENTS STYLES START */
.charsheet input:hover,
.charsheet input:focus,
.charsheet textarea:hover,
.charsheet textarea:focus {
  background: #e5fffb;
  outline: none;
}
.sheet-darkmode .charsheet input:hover,
.sheet-darkmode .charsheet input:focus,
.sheet-darkmode .charsheet textarea:hover,
.sheet-darkmode .charsheet textarea:focus {
  background: #333;
}
.charsheet select:hover,
.charsheet select:focus {
  background: #e5fffb;
}
.sheet-darkmode .charsheet select:hover,
.sheet-darkmode .charsheet select:focus {
  background: #333;
}
.charsheet select:hover option,
.charsheet select:focus option {
  background: white;
}
.sheet-darkmode .charsheet select:hover option,
.sheet-darkmode .charsheet select:focus option {
  background: #222;
}
/* GENERAL INPUT COMPONENTS STYLES END */

/* GENERAL USE CLASS SELECTORS START */
.charsheet .flex-row {
  display: flex;
  flex-direction: row;
}
.charsheet .flex-row.space-between {
  justify-content: space-between;
}
.charsheet .full-width {
  width: 100%;
}
.charsheet .flex-1 {
  flex: 1;
}
.charsheet .flex-2 {
  flex: 2;
}
.charsheet .column-reverse {
  flex-direction: column-reverse;
}
.charsheet .row-reverse {
  flex-direction: row-reverse;
}
.charsheet .align-center {
  align-items: center;
}
.charsheet .justify-center {
  justify-content: center;
}
.charsheet .pt-5 {
  padding-top: 5px;
}
.charsheet .pb-5 {
  padding-bottom: 5px;
}
.charsheet .p10 {
  padding: 10px;
}
.charsheet .margin10 {
  margin: 10px;
}
.charsheet .push-to-end {
  margin-top: auto;
}
.charsheet .d-inline {
  display: inline;
}
/* GENERAL USE CLASS SELECTORS END */

/* General CSS for Lyrian Chronicles character sheet */
.charsheet {
  padding: 0px !important;
  width: 880px;
  position: relative;
  z-index: 1000; /* or any high value */
}
.charsheet .sheet-lyrian-chronicles {
  background: white;
  color: black;
  font-size: 13px;
  line-height: 18px;
  margin: 0;
  /* overflow: scroll; */
  border-image: url("https://iili.io/K6nRyHF.png")
    100 100 100 100 fill stretch;
  border-style: solid;
  border-width: 30px 30px;
  box-sizing: border-box;
  /* height: auto; */
}
.sheet-darkmode .charsheet .sheet-lyrian-chronicles {
  background: #181818;
  color: #eee;
   border-image: url("https://iili.io/K6nRmS1.png")
    100 100 100 100 fill stretch; 
}
.charsheet .sheet-section-pc {
  margin: 0 auto;
  width: 100%;
  /* height: auto; */
}

.charsheet .section-container {
  border-image: url("https://iili.io/K6o3GUl.png")
    50 50 50 50 fill stretch;
  border-style: solid;
  border-width: 15px;
  box-sizing: border-box;
  width: 100%;
}
.sheet-darkmode .charsheet .section-container {
  filter: invert(1) brightness(0.9) contrast(1.1);
}
.charsheet .section-container .header {
  grid-area: header;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: -5px;
  margin-bottom: 5px;
  padding-left: 10px;
  color: #717171;
}
.sheet-darkmode .charsheet .section-container .header {
  color: #aaa;
}
/* General CSS for Lyrian Chronicles character sheet */

/* SHEET HEADER (NOT TO BE CONFUSED WITH TABLE HEADERS) START */
.charsheet .sheet-section-pc-header {
  display: grid;
  grid-template-areas: "logo details";
  grid-template-columns: 350px auto;
  gap: 10px;
  height: 160px;
  margin-bottom: 40px;
}
.charsheet .sheet-section-pc-header-logo {
  grid-area: logo;
}
.charsheet .sheet-section-pc-header-logo div {
  background: url("https://iili.io/K6o5UG4.png"); /* Logo Image */
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  background-size: 100%;
  margin: 0, auto;
}
.sheet-darkmode .charsheet .sheet-section-pc-header-logo div {
  filter: invert(1) brightness(0.9) contrast(1.1);
}

.charsheet .header-details-container {
  grid-area: details;
  border-image: url("https://iili.io/K6oBcFa.png") /* Header Details Box Light */
    50 50 50 50 fill stretch;
  border-style: solid;
  border-width: 20px 20px;
  box-sizing: border-box;
}
.sheet-darkmode .header-details-container {
  border-image: url("https://iili.io/K6ouZZv.png") /* Header Details Box Dark */
    50 50 50 50 fill stretch;
}
.charsheet .header-details-title {
  border-bottom: 2px solid #202020;
  color: #202020;
  font-size: 15px;
  font-weight: bold;
  line-height: 14px;
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -10px;
  text-align: center;
  text-transform: uppercase;
}
.sheet-darkmode .charsheet .header-details-title {
  border-bottom: 2px solid #ccc;
  color: #ccc;
}

.charsheet .sheet-section-pc .header-details-content {
  display: grid;
  grid-template-areas:
    "name spiritcore experience"
    "race subrace gender"
    "age c-weight c-height";
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  row-gap: 0px;
  height: 100%;
  width: 100%;
  margin-top: 10px;
  margin-bottom: -10px;
}
.charsheet .header-details-content .name {
  grid-area: name;
}
.charsheet .header-details-content .spiritcore {
  grid-area: spirit-core;
}
.charsheet .header-details-content .experience {
  grid-area: experience;
}
.charsheet .header-details-content .race {
  grid-area: race;
}
.charsheet .header-details-content .subrace {
  grid-area: subrace;
}
.charsheet .header-details-content .gender {
  grid-area: gender;
}
.charsheet .header-details-content .age {
  grid-area: age;
}
.charsheet .header-details-content .weight {
  grid-area: c-weight;
}
.charsheet .header-details-content .height {
  grid-area: c-height;
}
.charsheet .header-details-content div {
  display: flex;
  flex-direction: column-reverse;
}
.charsheet .header-details-content input {
  margin-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid black;
  border-radius: 0;
  height: 19px;
  padding: 0;
  width: 100% !important;
  border-color: #cccccc;
  background-color: white;
}
.sheet-darkmode .charsheet .header-details-content input {
  background-color: #000000;
  color: #eee;
  border-color: #444;
}
.charsheet .header-details-content select {
  margin-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid black;
  border-radius: 0;
  height: 19px;
  padding: 0;
  width: 100%;
  border-color: #cccccc;
}
.sheet-darkmode .charsheet .header-details-content select {
  background-color: #000;
  color: #eee;
  border-color: #444;
}
.charsheet .header-details-content label {
  font-size: 9px;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 1.5;
  color: #cccccc;
}
.sheet-darkmode .charsheet .header-details-content label {
  color: #d4d4d4;
}
/* SHEET HEADER (NOT TO BE CONFUSED WITH TABLE HEADERS) END */

/* TABS START */
.charsheet .sheet-tabs {
  position: relative;
  width: 100%;
}
.charsheet .sheet-tabs::after {
  clear: both;
  content: "";
  display: block;
}
.charsheet .sheet-tab {
  width: 100%;
}
.charsheet .sheet-tab:nth-of-type(2) > input[type="radio"],
.charsheet .sheet-tab:nth-of-type(2) > .sheet-tab-label {
  margin-left: 16.66667%;
}
.charsheet .sheet-tab:nth-of-type(3) > input[type="radio"],
.charsheet .sheet-tab:nth-of-type(3) > .sheet-tab-label {
  margin-left: 33.33333%;
}
.charsheet .sheet-tab:nth-of-type(4) > input[type="radio"],
.charsheet .sheet-tab:nth-of-type(4) > .sheet-tab-label {
  margin-left: 50%;
}
.charsheet .sheet-tab:nth-of-type(5) > input[type="radio"],
.charsheet .sheet-tab:nth-of-type(5) > .sheet-tab-label {
  margin-left: 66.66667%;
}
.charsheet .sheet-tab:nth-of-type(6) > input[type="radio"],
.charsheet .sheet-tab:nth-of-type(6) > .sheet-tab-label {
  margin-left: 83.33333%;
}
.charsheet .sheet-tab > input[type="radio"] {
  height: 30px;
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 16.66667%;
  z-index: 1;
}
.charsheet .sheet-tab > input[type="radio"]:hover ~ .sheet-tab-label {
  background: #979797;
  border-bottom-color: #ffffff;
  color: #575757;
}
.sheet-darkmode .charsheet .sheet-tab > input[type="radio"]:hover ~ .sheet-tab-label {
  background: #333;
  border-bottom-color: #222;
  color: #aaa;
}
.charsheet .sheet-tab > .sheet-tab-label {
  align-items: center;
  background: #dddddd;
  border-radius: 6px 6px 0 0;
  border: 2px solid #dddddd;
  color: #8a8a8a;
  display: flex;
  font-size: 11px;
  font-variant: small-caps;
  font-weight: bold;
  height: 30px;
  justify-content: center;
  margin: 0;
  position: absolute;
  text-transform: uppercase;
  top: 0;
  width: 16.66667%;
  border-left-color: white;
  border-top-color: white;
  border-right-color: white;
  border-bottom-color: lightgrey;
}
.sheet-darkmode .charsheet .sheet-tab > .sheet-tab-label {
  background: #222;
  border: 2px solid #333;
  color: #aaa;
  border-left-color: #333;
  border-top-color: #333;
  border-right-color: #333;
  border-bottom-color: #222;
}
.charsheet .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-label {
  background: white;
  border-color: #575757;
  border-bottom-color: white;
  color: black;
}
.sheet-darkmode .charsheet .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-label {
  background: #181818;
  border-color: #aaa;
  border-bottom-color: #181818;
  color: #eee;
}
.charsheet .sheet-tab > input[type="radio"]:checked {
  cursor: auto;
}
.charsheet .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-content {
  display: flex;
}
.charsheet .sheet-tab-content {
  /* min-height: 847px; */
  display: none;
  padding: 10px;
  padding-top: 45px;
  width: 100%;
  box-sizing: border-box;
  gap: 10px;
}
/* TABS END */

/* COLUMNS START */
.charsheet .flex-column {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.charsheet .core-left-column {
  width: 310px;
}
.charsheet .core-middle-column {
  width: 245px;
}
.charsheet .core-right-column {
  width: 240px;
}
.charsheet .features-left-column {
  width: 350px;
}
.charsheet .features-right-column {
  width: 450px;
}
.charsheet .inventory-left-column{
  width: 400px;

}
.charsheet .inventory-right-column {
  width: 400px;
}
.charsheet .skills-left-column{
  width: 400px;
}
.charsheet .notes-left-column{
  width: 300px;
}
.charsheet .notes-right-column{
  width: 500px;
}
/* COLUMNS START */

/* ATTRIBUTES START */
.charsheet .main-stats-container {
  display: grid;
  grid-template-areas:
    "focus fitness"
    "power cunning"
    "agility reason"
    "toughness awareness"
    ". presence";
  grid-template-columns: 1fr 1fr;
  width: 310px;
}
.charsheet .main-stats-container .focus {
  grid-area: focus;
  padding-right: 5px;
}
.charsheet .main-stats-container .power {
  grid-area: power;
  padding-right: 5px;
}
.charsheet .main-stats-container .agility {
  grid-area: agility;
  padding-right: 5px;
}
.charsheet .main-stats-container .toughness {
  grid-area: toughness;
  padding-right: 5px;
}
.charsheet .main-stats-container .cunning {
  grid-area: cunning;
  border-left: #afafaf 1px solid;
  padding-bottom: 2px;
  padding-left: 5px;
}
.sheet-darkmode .charsheet .main-stats-container .cunning {
  border-left: #555555 1px solid;
}
.charsheet .main-stats-container .awareness {
  grid-area: awareness;
  border-left: #afafaf 1px solid;
  padding-bottom: 2px;
  padding-left: 5px;
}
.sheet-darkmode .charsheet .main-stats-container .awareness {
  border-left: #555555 1px solid;
}
.charsheet .main-stats-container .presence {
  grid-area: presence;
  border-left: #afafaf 1px solid;
  padding-bottom: 2px;
  padding-left: 5px;
}
.sheet-darkmode .charsheet .main-stats-container .presence {
  border-left: #555555 1px solid;
}
.charsheet .main-stats-container .reason {
  grid-area: reason;
  border-left: #afafaf 1px solid;
  padding-bottom: 2px;
  padding-left: 5px;
}
.sheet-darkmode .charsheet .main-stats-container .reason {
  border-left: #555555 1px solid;
}
.charsheet .main-stats-container .fitness {
  grid-area: fitness;
  border-left: #afafaf 1px solid;
  padding-bottom: 2px;
  padding-left: 5px;
}
.sheet-darkmode .charsheet .main-stats-container .fitness {
  border-left: #555555 1px solid;
}
.charsheet .attribute-container,
.charsheet .attribute-container2 {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: start;
}
.charsheet .attribute-container .label,
.charsheet .attribute-container2 .label {
  display: flex;
  color: #717171;
  height: 30px;
  width: 110px;
  border-image: url("https://iili.io/K6nUJmF.png") /*Attribute HexBox*/
    50 50 50 50 fill stretch;
  border-style: solid;
  border-width: 10px 10px;
  box-sizing: border-box;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  margin-left: -15px; /*this is to fit the 2 pieces*/
  padding-left: 10px; /*without this it ends too close to the edge*/
  text-align: center;
  justify-content: start;
  line-height: 0.5;
}
.sheet-darkmode .charsheet .attribute-container .label,
.sheet-darkmode .charsheet .attribute-container2 .label,
.sheet-darkmode .charsheet .attribute-container3 .label {
  color: #000000;
}
.charsheet .attribute-container .value {
  width: 37px;
  height: 37px;
  border-image: url("https://iili.io/K6nUJmF.png") /*Attribute HexBox*/
    50 50 50 50 fill stretch;
  border-style: solid;
  border-width: 10px 10px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: bold;
  justify-content: center;
  align-content: center;
  z-index: 10;
}
.charsheet .attribute-container .value input,
.charsheet .attribute-container2 .value input {
  border: 0;
  background: transparent;
  width: 30px !important;
  height: 26px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding: 0;
  margin-left: -6.5px;
  margin-top: -4px;
  color: #505050;
  cursor: default;
}
.sheet-darkmode .charsheet .attribute-container .value input,
.sheet-darkmode .charsheet .attribute-container2 .value input,
.sheet-darkmode .charsheet .attribute-container3 .value input {
  color: #0f0f0f;
}

.charsheet .attribute-container3 {
  flex-grow: 1;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: start;
  border-image: url("https://iili.io/K6nUJmF.png") /*Attribute HexBox*/
    50 50 50 50 fill stretch;
  border-style: solid;
  border-width: 8px 10px;
  box-sizing: border-box;
  width: 80px;
  margin: 0 6px;
}
.charsheet .attribute-container3 .label {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  justify-content: start;
  line-height: 0.5;
  color: #8c8c8c;
}
.charsheet .attribute-container3 .value input {
  border: 0;
  background: transparent;
  width: 100%;
  height: 20px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding: 0;
  color: #505050;
  cursor: default;
}
/* ATTRIBUTE END */

/* DERIVED ATTRIBUTES START*/
.charsheet .gap-5 {
  gap: 5px;
}

.charsheet .attribute-container .label.composite {
  justify-content: center;
  width: 160px;
  cursor: default;
}
.charsheet .attribute-container .label.composite2 {
  justify-content: center;
  width: 120px;
  cursor: default;
}
.charsheet .attribute-container .label button[type="action"],
.charsheet .attribute-container .label button[type="roll"] {
  font-size: 12px !important;
  margin-left: 0px;
  line-height: 0.1;
  text-align: start;
}
.charsheet .attribute-container .value.composite {
  display: flex;
  flex-direction: row;
  justify-content: start;
  width: 160px;
}
.charsheet .attribute-container .value.composite2 {
  display: flex;
  flex-direction: row;
  justify-content: start;
  width: 100px;
}
.charsheet .attribute-container .value.composite input {
  width: 42px !important;
  margin-left: 0px;
  font-size: 15px;
}
.charsheet .attribute-container .value.composite2 input {
  width: 75px !important;
  margin-left: 0px;
  font-size: 18px;
}

.charsheet .attribute-container .value.composite input:nth-of-type(2) {
  border-left: #a7a7a7 1px solid;
  border-radius: 0%;
}
.sheet-darkmode .charsheet .attribute-container .value.composite input:nth-of-type(2) {
  border-left: #555555 1px solid;
}
.charsheet .attribute-container .value.composite input:nth-of-type(3) {
  border-left: #a7a7a7 1px solid;
  border-radius: 0%;
}
.sheet-darkmode .charsheet .attribute-container .value.composite input:nth-of-type(3) {
  border-left: #555555 1px solid;
}
.charsheet .attribute-container2 .value {
  background: url("https://iili.io/K6nyElI.png"); /*Derived Attribute DiamondBox*/
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  background-size: 100%;
  margin: 0, auto;
  z-index: 20;
  justify-content: center;
  align-items: center;
}
.charsheet .attribute-container2 .label {
  margin-left: -30px;
  padding-left: 25px;
  width: 130px;
}
.charsheet .attribute-container2 .label button[type="action"],
.charsheet .attribute-container2 .label button[type="roll"] {
  font-size: 12px !important;
  margin-left: 2px;
  line-height: 0.1;
  text-align: start;
}
.charsheet .attribute-container2 .value input {
  width: 40 !important;
  margin-top: 0.3px;
  margin-left: 0px;
  font-size: 16px;
}
.charsheet input:checked ~ .attribute-container.all-mount-hp,
.charsheet input:checked ~ .mount-divider{
  display: flex;
}
.charsheet .mount-divider{
  display: none;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  color: #161616;
}
.charsheet .attribute-container.all-mount-hp{
  display: none;
}

.charsheet .derived-stats {
  display: grid;
  grid-template-areas:
    "evasion dodge"
    "guard blocking"
    "save-bonus potency"
    "initiative speed";
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.charsheet .derived-stats .evasion {
  grid-area: evasion;
}
.charsheet .derived-stats .dodge {
  grid-area: dodge;
}
.charsheet .derived-stats .guard {
  grid-area: guard;
}
.charsheet .derived-stats .blocking {
  grid-area: blocking;
}
.charsheet .derived-stats .save-bonus {
  grid-area: save-bonus;
}
.charsheet .derived-stats .potency {
  grid-area: potency;
}
.charsheet .derived-stats .speed {
  grid-area: speed;
}
.charsheet .derived-stats .initiative {
  grid-area: initiative;
}

.charsheet .section-container.basic-attacks {
  display: grid;
  justify-content: space-around;
  align-items: center;
  grid-template-areas:
    "misc-bonuses"
    "main-weapon-attack"
    "generic-attack";
  gap: 5px;
}
.charsheet .section-container.basic-attacks .picker {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.charsheet .section-container.basic-attacks .picker label{
  font-size: 9px;
  text-transform: uppercase;
  font-weight: bold;
  color: #cccccc;
  margin-bottom: 0px;
  padding: 0px;
  text-align: center;
}
.sheet-darkmode .charsheet .section-container.basic-attacks .picker label{
  color: #2e2e2e;
}
.charsheet .section-container.basic-attacks .picker select{
  margin-bottom: 0;
  border: none;
  border-bottom: #cccccc 1px solid;
  border-radius: 0%;
  height: 15px;
  padding: 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
}
.sheet-darkmode .section-container.basic-attacks .picker select{
  color: #131313;
  border-bottom: #1e1e1e 1px solid;
  background: #fff;
}
.sheet-darkmode .charsheet .section-container.basic-attacks .picker select:focus,
.sheet-darkmode .charsheet .section-container.basic-attacks .picker select:hover{
  background: #fff;
  color: #131313;
}
.charsheet .section-container.core-skills {
  height: 100%;
}
.charsheet .section-container.core-abilities {
  height: 100%;
}
.charsheet .basic-attack.mwp {
  grid-area: main-weapon-attack;
}
.charsheet .basic-attack.generic {
  grid-area: generic-attack;
}

.charsheet .attribute-container .label.basic-attack {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0px;
  width: 210px;
}
.charsheet .attribute-container .label.basic-attack button {
  font-size: 14px !important;
  line-height: 0.3;
  text-align: center;
}

.charsheet .static-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.charsheet .attribute-value.single-block {
  display: flex;
  width: 70px;
  height: 37px;
  border-image: url("https://iili.io/K6nUJmF.png") /*Attribute HexBox*/
    50 50 50 50 fill stretch;
  border-style: solid;
  border-width: 10px 10px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: bold;
  justify-content: center;
  align-content: center;
  z-index: 10;
}
.charsheet .attribute-value.single-block input {
  margin-top: 3px;
}
.charsheet .small-attribute-label {
  font-size: 7px;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 1.5;
  color: #454545;
  margin-bottom: -12px;
  z-index: 30;
}
.sheet-darkmode .charsheet .small-attribute-label {
  color: #b0b0b0;
}
/* DERIVED ATTRIBUTES END */

/* TABLES START */
.charsheet .table-container {
  display: flex;
  flex-direction: column;
  border-image: url("https://iili.io/K6nUJmF.png") /*Attribute HexBox*/
    50 50 50 50 fill stretch;
  border-style: solid;
  border-width: 10px 10px;
  box-sizing: border-box;
}
.charsheet .table-container.minH300 {
  min-height: 300px;
}
.charsheet .table-container.minH200 {
  min-height: 200px;
}
.charsheet .table-container.minH100 {
  min-height: 100px;
}
/* TABLES START */

/* INJURIES TABLE START*/
.charsheet .table-container .injuries-grid {
  display: grid;
  grid-template-areas:
    "head-injury eye-injury"
    "main-hand-injury off-hand-injury"
    "leg-injury foot-injury"
    "muscle-injury laceration-injury"
    "spirit-circuit-injury wound-injury";
  width: 100%;
  gap: 2px;
}
.sheet-darkmode .charsheet .table-container .injuries-grid {
  color: #0f0f0f;
}
.charsheet .injuries-grid span{
  cursor: default;
}
.charsheet .injuries-grid .head {
  grid-area: head-injury;
}
.charsheet .injuries-grid .eye {
  grid-area: eye-injury;
}
.charsheet .injuries-grid .main-hand {
  grid-area: main-hand-injury;
}
.charsheet .injuries-grid .off-hand {
  grid-area: off-hand-injury;
}
.charsheet .injuries-grid .leg {
  grid-area: leg-injury;
}
.charsheet .injuries-grid .foot {
  grid-area: foot-injury;
}
.charsheet .injuries-grid .muscle {
  grid-area: muscle-injury;
}
.charsheet .injuries-grid .laceration {
  grid-area: laceration-injury;
}
.charsheet .injuries-grid .spirit-circuit {
  grid-area: spirit-circuit-injury;
}
.charsheet .injuries-grid .wound {
  grid-area: wound-injury;
}
.charsheet .injury-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: start;
  width: 100%;
}
/* INJURIES TABLE END*/

/* =========================================================================== */

/* GENERAL REPEATING TABLES STYLES START */
.charsheet .table-container .table-body{
  display: flex;
  flex-direction: column;
  width: 100%;
  flex:1;
}
.charsheet .table-container .item-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-bottom: #717171 1px solid;
}
.sheet-darkmode .charsheet .table-container .item-container {
  border-bottom: #444 1px solid;
}
.charsheet .table-container .table-name2 {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: -5px;
  margin-bottom: 5px;
  color: #717171;
  border-bottom: #202020 2px solid;
  text-align: center;
  padding: 0px;
  width: 100%;
  cursor: default;
}
.sheet-darkmode .charsheet .table-container .table-name2 {
  color: #2c2c2c;
  border-bottom: #202020 2px solid;
}
.charsheet .table-container .headers-container{
  display: flex;
  flex-direction: row;
  width: 100%;
  border-bottom: #717171 1px solid;
}
.sheet-darkmode .charsheet .table-container .headers-container {
  border-bottom: #444 1px solid;
}
.charsheet .table-container .headers-container .header2{
  font-size: 10px;
  text-align: center;
  cursor: default;
}
.sheet-darkmode .charsheet .table-container .headers-container .header2{
  color: #0f0f0f;
}
.charsheet .table-container .row-container{
  display: none;
  flex-direction: column;
  width: 100%;
}
.charsheet .table-container input[type="checkbox"]:checked + .row-container,
.charsheet .npc-sheet-content .row-container {
  display: flex;
}
.charsheet .table-container .table-row{
  font-size: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.sheet-darkmode .charsheet .table-container .table-row{
  color: #0f0f0f;
}
.charsheet .table-container .table-row  .name-button{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  height: 20px;
  width: 100%;
}
.charsheet .table-container .table-row  .name-button button[type="action"]{
  opacity: 100;
  box-sizing: border-box;
  position: absolute;
  width: 200px;
  min-height: 20px;
  z-index: 10;
}
.charsheet .table-container .table-row  .name-button span{
  display: flex;
  font-size: 10px;
  width: 100%;
  /* min-height: 20px; */
  height: 20px;
  width: 200px;
  font-weight: bold;
  text-transform: capitalize;
  color: #202020;
  text-align: start;
  align-items: center;
  justify-content: start;
  padding-top: 2px;
  border: none;
  cursor: pointer;
  margin-top: 0px;
  box-sizing: border-box;
    white-space: nowrap;      /* Prevents wrapping */
  overflow: hidden;         /* Hides overflow */
  text-overflow: ellipsis;  /* Shows "..." if text is cut off */
  display: inline-block; 
}
.sheet-darkmode .charsheet .table-container .table-row  .name-button span{
  color: #141414;
}
.charsheet .table-container .table-row  .name-button button:hover + span {
  color: #b61037;
}
.sheet-darkmode .charsheet .table-container .table-row  .name-button button:hover + span {
  color: #49efc8;
}
.charsheet .table-container .table-row  .name-button button:active + span {
  color: #ff0000;
}
.sheet-darkmode .charsheet .table-container .table-row  .name-button button:active + span {
  color: #0ff;
}

.charsheet .table-container .table-row  select{
  margin-bottom: 0;
  border: none;
  height: 20px;
  padding: 0;
  width: 100%;
  text-align: center;
  font-size: 11px;
}
.sheet-darkmode .charsheet .table-container .table-row  select{
  background-color: #fff;
  color: #000;
}
.charsheet .table-container .table-row .actions .view-details{
  display: inline-block;
  font-size: 13px;
  margin-bottom: 1px;
  line-height: 0.7;
  cursor: pointer;
}
.charsheet .table-container .table-row .actions .item {
  width: 20px;
  height: 20px;
}
.charsheet .table-container .table-row .actions .item.thin {
  width: 13px;
}
.charsheet .table-container .table-row .actions .item input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  margin-left: -10px;
  width: 20px;
  height: 20px;
  z-index: 10;
}
.charsheet .table-container .table-row .actions .item.thin input[type="checkbox"] {
  width: 13px;
  margin-left: 0px;
}
.sheet-darkmode .charsheet .npc-icon,
.charsheet .table-container .table-row .actions .item span {
  display: flex;
  width: 20px;
  height: 20px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #9e9e9e;
  text-align: center;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  margin-top: 0px;
}
.sheet-darkmode .charsheet .npc-icon,
.sheet-darkmode .charsheet .table-container .table-row .actions .item span {
  color: #272626;
}
.charsheet .table-container .table-row .actions .item.thin span {
  width: 13px;
}
.charsheet input:hover + .npc-icon,
.charsheet .table-container .table-row .actions .item input:hover + span {
  border-color: #b61037;
  color: #b61037;
}
.sheet-darkmode .charsheet input:hover + .npc-icon,
.sheet-darkmode .charsheet .table-container .table-row .actions .item input:hover + span {
  border-color: #49efc8;
  color: #49efc8;
}
.charsheet input:active + .npc-icon,
.charsheet .table-container .table-row .actions .item input:active + span {
  border-color: #ff0000;
  color: #ff0000;
}
.sheet-darkmode .charsheet input:active + .npc-icon,
.sheet-darkmode .charsheet .table-container .table-row .actions .item input:active + span {
  border-color: #0ff;
  color: #0ff;
}
.charsheet .table-container .table-row .actions .item .favorite{
  display: inline-block;
  font-size: 12px;
  margin-top: 2px;
  cursor: pointer;
}
.charsheet .table-container .table-row .actions .item input:checked + .favorite{
  color: rgb(255, 225, 0);
}
.sheet-darkmode .charsheet .table-container .table-row .actions .item input:checked + .favorite{
  color: rgb(0, 102, 255);
}
.charsheet .table-container .table-row .actions .item .info{
  display: inline-block;
  font-size: 15px;
  cursor: pointer;
}
.charsheet .table-container .table-row .actions .item input:checked + .info{
  color: blue;
}
.sheet-darkmode .charsheet .table-container .table-row .actions .item input:checked + .info{
  color: #c37200;
}
.charsheet .table-container .table-row .actions .item .edit{
  display: inline-block;
  font-size: 15px;
  margin-top: 1px;
  cursor: pointer;
}
.charsheet .table-container .table-row .row-details{
  display: none;
  gap: 5px;
  width: 100%;
  flex-direction: column;
  font-size: 9px;
  text-align: justify;
  padding: 5px;
  background-color: #f3f3f3;
  border: #717171 1px solid;
  border-radius: 5px;
  box-sizing: border-box;
  margin-top: 5px;
  margin-bottom: 5px;
  gap: 8px;
}
.sheet-darkmode .charsheet .table-container .table-row .row-details {
  background-color: #222;
  border: #444 1px solid;
}
.charsheet .table-container .table-row .row-details .details-item{
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
}
.charsheet .table-container .table-row .row-details .details-label{
  flex: 1;
  font-size: 10px;
  font-weight: bold;
}
.charsheet .table-container .table-row .row-details span{
  flex: 1;
  font-size: 10px;
}

.charsheet .table-container .details-container {
    display: none;
  flex-direction: column;
  font-size: 10px;
  text-align: justify;
  padding: 5px;
  background-color: #f3f3f3;
  border: #717171 1px solid;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  margin-bottom: 5px;
  gap: 5px;
}
.sheet-darkmode .charsheet .table-container .details-container {
  background-color: #222;
  border: #444 1px solid;
}
.charsheet .table-container .details-container .details-row {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.charsheet .table-container .details-container .details-row .details-label {
  flex: 1;
  font-weight: bold;
  text-transform: capitalize;
}
.charsheet .table-container .details-container .details-row .details-value {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 5px;
  line-height: 1.5;
}
.charsheet .table-container .details-container .details-row .details-label2 {
  flex: 1;
  font-weight: bold;
  text-transform: capitalize;
}
.charsheet .table-container .details-container .details-row .details-value2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  line-height: 1.5;
}

.charsheet .form-container{
  display: grid;
  min-height: 100px;
  padding: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border: #717171 1px solid;
  border-radius: 5px;
  align-items: center;
  margin: 5px;
  gap: 5px;
}
.sheet-darkmode .charsheet .form-container {
  border: #444 1px solid;
}
.charsheet .table-container input[type="checkbox"]:checked + .form-container {
  display: none;
}
.charsheet .form-container input[type="number"],
.charsheet .form-container input[type="text"]{
  margin-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid black;
  border-radius: 0;
  height: 15px;
  padding: 0;
  width: 100%;
  border-color: #cccccc;
  background-color: white;
  text-align: center;
  font-size: 12px;
}
.sheet-darkmode .charsheet .form-container input[type="number"],
.sheet-darkmode .charsheet .form-container input[type="text"]{
  color: #131313;
  border-color: #1e1e1e;
}
.charsheet .form-container .block-textarea {
  width: 100%;
  min-height: 48px;
  height: 48px;
  resize: vertical;      /* Allows user to resize vertically */
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  font-size: 12px;
}
.sheet-darkmode .charsheet .form-container .block-textarea:hover,
.sheet-darkmode .charsheet .form-container .block-textarea:focus{
  background: #fff;
  color: #131313;
}
.charsheet .form-container label{
  font-size: 9px;
  text-transform: uppercase;
  font-weight: bold;
  color: #cccccc;
  margin-bottom: 0px;
  padding: 0px;
  text-align: center;
}
.sheet-darkmode .charsheet .form-container label{
  color: #2e2e2e;
}
.charsheet .form-container .picker select{
  margin-bottom: 0;
  border: none;
  border-bottom: #cccccc 1px solid;
  border-radius: 0%;
  height: 15px;
  padding: 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
}
.sheet-darkmode .charsheet .form-container .picker select{
  color: #131313;
  border-bottom: #1e1e1e 1px solid;
  background: #fff;
}
.sheet-darkmode .charsheet .form-container .picker select:focus,
.sheet-darkmode .charsheet .form-container .picker select:hover{
  background: #fff;
  color: #131313;
}
.charsheet .form-container .custom-enabler:checked ~ .custom{
  display: flex;
}


.charsheet .form-container .form-close{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 20px;
  width: 100%;
  grid-area: close;
}
.charsheet .form-container .form-close input[type="checkbox"] {
  opacity: 0;
  box-sizing: border-box;
  position: absolute;
  width: 90px;
  height: 20px;
  z-index: 10;
}
.charsheet .form-container .form-close span {
  display: flex;
  font-size: 10px;
  width: 90px;
  height: 20px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
  border: #8a8a8a 2px solid;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 0px;
  box-sizing: border-box;
  border-color: #2e2e2e;
  color: #2e2e2e;
}
.charsheet .form-container .form-close input:hover + span {
  border-color: #b61037;
  color: #b61037;
}
.sheet-darkmode .charsheet .form-container .form-close input:hover + span {
  border-color: #49efc8;
  color: #49efc8;
}
.charsheet .form-container .form-close input:active + span {
  border-color: #ff0000;
  color: #ff0000;
}
.sheet-darkmode .charsheet .form-container .form-close input:active + span {
  border-color: #00ffff;
  color: #00ffff;
}

/* THIS IS TO HANDLE THE AUTO GENERATED REPEATING TABLE CONTROLS */
.charsheet .table-container .repcontrol {
  margin-top: auto;
  padding-top: 5px;
}
.charsheet .table-container .repcontrol_del, .charsheet .table-container .repcontrol_move{
    z-index: 100;
  position: relative;
  pointer-events: auto;
}
.charsheet .table-container .repcontrol_add,
.charsheet .table-container .repcontrol_edit {
  font-size: 10px;
  background: none;
  /* width: 90px; */
  height: 15px;
  font-weight: bold;
  text-transform: uppercase;
  color: #717171;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
  border: #8a8a8a 2px solid;
  border-radius: 4px;
}
.sheet-darkmode .charsheet .table-container .repcontrol_add,
.sheet-darkmode .charsheet .table-container .repcontrol_edit {
  border-color: #2e2e2e;
  color: #2e2e2e;
}
.charsheet .table-container .repcontrol_add:hover,
.charsheet .table-container .repcontrol_edit:hover {
  border-color: #b61037;
  color: #b61037;
  outline: none;
  box-shadow: none;
}
.sheet-darkmode .charsheet .table-container .repcontrol_add:hover,
.sheet-darkmode .charsheet .table-container .repcontrol_edit:hover {
  border-color: #49efc8;
  color: #49efc8;
}
.charsheet .table-container .repcontrol_add:active,
.charsheet .table-container .repcontrol_edit:active {
  border-color: #ff0000;
  color: #ff0000;
  outline: none;
  box-shadow: none;
}
.sheet-darkmode .charsheet .table-container .repcontrol_add:active,
.sheet-darkmode .charsheet .table-container .repcontrol_edit:active {
  border-color: #00ffff;
  color: #00ffff;
}
/* GENERAL REPEATING TABLES STYLES END */

/* =========================================================================== */

/* CLASSES REVAMPED STYLES START */

.charsheet .table-container .headers-container .header2.name {
  flex: 6;
  text-align: left;
  padding-left: 5px;
}
.charsheet .table-container .headers-container .header2.tier {
  flex: 2;
}
.charsheet .table-container .headers-container .header2.level {
  flex: 2;
}
.charsheet .table-container .headers-container .header2.xp {
  flex: 3;
}
.charsheet .table-container .headers-container .header2.actions {
  flex: 1;
}

.charsheet .table-container .table-row .name{
  font-size: 10px;
  flex: 8;
  text-align: left;
  padding-left: 5px;
  font-weight: bold;
  cursor: default;
}
.charsheet .table-container .table-row .tier {
  flex: 2;
  text-align: center;
  cursor: default;
}
.charsheet .table-container .table-row .level{
  flex:3;

}
.charsheet .table-container .table-row .xp {
  flex: 3;
  text-align: center;
  cursor: default;
}
.charsheet .table-container .table-row .actions{
  flex: 2;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  gap: 5px;
}

.charsheet .table-container .form-container.class-grid{
  grid-template-areas:
    "dropdown dropdown dropdown xp-modifier"
    "close close close close";
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.charsheet .table-container .custom-enabler:checked ~ .class-grid {
  grid-template-areas:
    "dropdown dropdown dropdown xp-modifier"
    "name name name tier"
    "close close close close";
}
.charsheet .form-container .name {
  display: none;
  flex-direction: column;
  grid-area: name;
  width: 100%;
}
.charsheet .form-container .tier {
  display: none;
  flex-direction: column;
  align-items: center;
  grid-area: tier;
  width: 100%;
}
.charsheet .form-container .picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-area: dropdown;
  width: 100%;
}
.charsheet .form-container .xp-modifier {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-area: xp-modifier;
  width: 100%;
}
/* CLASSES REVAMPED STYLES END */

/* =========================================================================== */

/* BREAKTHROUGH REVAMPED STYLES START */

.charsheet .table-container .headers-container .header2.name2 {
  flex: 10;
  text-align: left;
  padding-left: 5px;
}
.charsheet .table-container .headers-container .header2.xp2 {
  flex: 3;
}
.charsheet .table-container .headers-container .header2.actions2 {
  flex: 2;
}

.charsheet .table-container .table-row .name2{
  font-size: 10px;
  flex: 10;
  text-align: left;
  padding-left: 5px;
  font-weight: bold;
  cursor: default;
}
.charsheet .table-container .table-row .xp2 {
  flex: 3;
  text-align: center;
  cursor: default;
}
.charsheet .table-container .table-row .actions2{
  flex: 2;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  gap: 5px;
}

.charsheet .table-container .form-container.breakthrough-grid{
  grid-template-areas:
    "dropdown dropdown dropdown starter"
    "close close close close";
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.charsheet .table-container .custom-enabler:checked ~ .breakthrough-grid {
  grid-template-areas:
    "dropdown dropdown dropdown starter"
    "name name name xp"
    "requirements requirements requirements requirements"
    "description description description description"
    "close close close close";
}
.charsheet .form-container .picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-area: dropdown;
  width: 100%;
}
.charsheet .form-container .picker.starter {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-area: starter;
  width: 100%;
}
.charsheet .form-container .name {
  display: none;
  flex-direction: column;
  grid-area: name;
  width: 100%;
}
.charsheet .form-container .xp {
  display: none;
  flex-direction: column;
  align-items: center;
  grid-area: xp;
  width: 100%;
}
.charsheet .form-container .requirements {
  display: none;
  flex-direction: column;
  align-items: center;
  grid-area: requirements;
  width: 100%;
}
.charsheet .form-container .description {
  display: none;
  flex-direction: column;
  align-items: center;
  grid-area: description;
  width: 100%;
}
.charsheet .table-container input:checked + .details-container.breakthrough {
  display: flex;
}


/* BREAKTHROUGH REVAMPED STYLES END */


/* ABILITIES REVAMPED STYLES START */

.charsheet .table-container.abilities {
  min-height: 450px;
}
.charsheet .table-container.abilities.keyab {
  min-height: 150px;
}
.charsheet .table-container .headers-container .header2.name3 {
  flex: 9;
  text-align: left;
  padding-left: 5px;
}
.charsheet .table-container .headers-container .header2.range3 {
  flex: 3;
}
.charsheet .table-container .headers-container .header2.cost3 {
  flex: 4;
}
.charsheet .table-container .headers-container .header2.actions3 {
  flex: 4;
}

.charsheet .table-container .table-row .name3{
  font-size: 10px;
  flex: 9;
  text-align: left;
  padding-left: 5px;
  font-weight: bold;
  cursor: default;
}
.charsheet .table-container .table-row  .name-button.name3 button{
  width: 150px;
}
.charsheet .table-container .table-row  .name-button.name3 span{
  width: 150px;
}
.charsheet .table-container .table-row .range3 {
  flex: 3;
  text-align: center;
  cursor: default;
}
.charsheet .table-container .table-row .range3 span{
    white-space: nowrap;      /* Prevents wrapping */
  overflow: hidden;         /* Hides overflow */
  text-overflow: ellipsis;  /* Shows "..." if text is cut off */
  display: inline-block;    /* Needed for width to apply */
  max-width: 55px;
  vertical-align: middle;
  height: 100%;
}
.charsheet .table-container .table-row .cost3 {
  flex: 4;
  text-align: center;
  cursor: default;
}
.charsheet .table-container .table-row  .name-button.icon button{
  width: 20px;
}
.charsheet .table-container .table-row  .name-button.icon span{
  width: 20px;
  font-size: 15px;
  padding-bottom: 3px;
}
.charsheet .table-container .table-row .actions3{
  flex: 4;
}

.charsheet .table-container input:checked + input:checked + .details-container.ability {
  display: flex;
}

.charsheet .table-container .form-container.ability-grid{
  grid-template-areas:
    "dropdown dropdown dropdown dropdown"
    "rolls rolls rolls rolls"
    "close close close close";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:10px;
}
.charsheet .table-container .custom-enabler:checked ~ .ability-grid {
  grid-template-areas:
    "dropdown dropdown dropdown dropdown"
    "name name name atype"
    "keywords keywords range costs"
    "requirements requirements requirements requirements"
    "description description description description"
    "rolls rolls rolls rolls"
    "close close close close";
}
.charsheet .form-container .picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-area: dropdown;
  width: 100%;
}
.charsheet .form-container .name {
  display: none;
  flex-direction: column;
  grid-area: name;
  width: 100%;
}
.charsheet .form-container .picker.atype {
  display: none;
  grid-area: atype;
  width: 100%;
}
.charsheet .form-container input:checked + .picker.atype {
  display: flex;
}
.charsheet .form-container .block-textarea.requirements-ba {
  min-height: 25px;
  height: 25px;
}
.charsheet .form-container .range {
  display: none;
  flex-direction: column;
  align-items: center;
  grid-area: range;
  width: 100%;
}
.charsheet .form-container .keywords {
  display: none;
  flex-direction: column;
  align-items: center;
  grid-area: keywords;
  width: 100%;
}
.charsheet .form-container .costs {
  display: none;
  flex-direction: column;
  align-items: center;
  grid-area: costs;
  width: 100%;
}
.charsheet .form-container .requirements {
  display: none;
  flex-direction: column;
  align-items: center;
  grid-area: requirements;
  width: 100%;
}
.charsheet .form-container .description {
  display: none;
  flex-direction: column;
  align-items: center;
  grid-area: description;
  width: 100%;
}
.charsheet .form-container .picker.rolls {
  display: flex;
  grid-area: rolls;
  width: 100%;
  flex-direction: column;
}
.charsheet .form-container .custom-macro {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 5px;
}
.charsheet .form-container input:checked + .custom-macro {
  display: flex;
}
.charsheet .form-container .custom-macro .block-textarea {
  font-size: 10px;
  margin:0px;
  min-height: 60px;
  height: 60px;
}


/* ABILITIES REVAMPED STYLES END */


/* FAVORITE ABILITIES REVAMPED STYLES START */
.charsheet .table-container.favorite-abilities{
  height: 100%;
}
.charsheet .table-container.favorite-abilities input:checked + .item-container{
  display: flex;
}
.charsheet .table-container.favorite-abilities input:checked + .item-container .row-container{
  display: flex;
}
.charsheet .table-container.favorite-abilities .item-container{
  display: none;
}

.charsheet .table-container.favorite-abilities .table-row{
  display: flex;
  flex-direction: row;
}
.charsheet .table-container.favorite-abilities .table-row  .name-button.name3 {
  flex:11
}
.charsheet .table-container.favorite-abilities .table-row  .name-button.icon {
  display: flex;
  justify-content: end;
  flex:1;
}
.charsheet .table-container.favorite-abilities .table-row  .name-button span {
  display: flex;
  justify-content: center;
}

.charsheet .table-container.favorite-abilities .table-row  .name-button.name3 button{
  width: 100%;
}
.charsheet .table-container.favorite-abilities .table-row  .name-button.name3 span{
  width: 100%;
  text-align: center;
  justify-content: center;
}

.charsheet .table-container.favorite-abilities .repcontrol{
  /* display: none; */
}
.charsheet .table-container.favorite-abilities .repcontrol .repcontrol_add{
  display: none !important; 
}
.charsheet .table-container.favorite-abilities .repitem .repcontrol_del{
  display: none;
}
/* FAVORITE ABILITIES REVAMPED STYLES END */

/* FAVORITE EXPERTISES REVAMPED STYLES START */
.charsheet .table-container.favorite-expertises{
  height: 100%;
}
.charsheet .table-container.favorite-expertises input:checked + .item-container{
  display: flex;
}
.charsheet .table-container.favorite-expertises input:checked + .item-container .row-container{
  display: flex;
}
.charsheet .table-container.favorite-expertises .item-container{
  display: none;
}

.charsheet .table-container.favorite-expertises .table-row  .name-button.name3 button{
  width: 192px;
}
.charsheet .table-container.favorite-expertises .table-row  .name-button.name3 span{
  width: 192px;
  text-align: center;
  justify-content: center;
}

.charsheet .table-container.favorite-expertises .repcontrol{
  display: none;
}
/* FAVORITE EXPERTISES REVAMPED STYLES END */

/* ARMORS REVAMPED STYLES START  */

.charsheet .table-container .headers-container .header2.name4 {
  flex: 10;
  text-align: left;
  padding-left: 5px;
}
.charsheet .table-container .headers-container .header2.burden4 {
  flex: 2;
}
.charsheet .table-container .headers-container .header2.status4 {
  flex: 3;
}
.charsheet .table-container .headers-container .header2.actions4 {
  flex: 2;
}

.charsheet .table-container .table-row .name4{
  font-size: 10px;
  flex: 10;
  text-align: left;
  padding-left: 5px;
  font-weight: bold;
  cursor: default;
}
.charsheet .table-container .table-row .burden4 {
  flex: 3;
  text-align: center;
  cursor: default;
}
.charsheet .table-container .table-row .status4 {
  flex: 3;
  text-align: center;
  cursor: default;
}


.charsheet .table-container .form-container.armor-grid{
  grid-template-areas:
    "name name status status burden"
    "guard block evasion dodge initiative"
    "description description description description description"
    "close close close close close";
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap:10px;
}
.charsheet .form-container.armor-grid .picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-area: dropdown;
  width: 100%;
}
.charsheet .form-container.armor-grid .name {
  display: flex;
  flex-direction: column;
  grid-area: name;
  width: 100%;
}
.charsheet .form-container.armor-grid .burden {
  flex-direction: column;
  grid-area: burden;
  width: 100%;
}
.charsheet .form-container.armor-grid .status {
  flex-direction: column;
  grid-area: status;
  width: 100%;
}
.charsheet .form-container.armor-grid .evasion {
  grid-area: evasion;
  width: 100%;
}
.charsheet .form-container.armor-grid .dodge {
  grid-area: dodge;
  width: 100%;
}
.charsheet .form-container.armor-grid .initiative {
  grid-area: initiative;
  width: 100%;
}
.charsheet .form-container.armor-grid .guard {
  grid-area: guard;
  width: 100%;
}
.charsheet .form-container.armor-grid .block {
  grid-area: block;
  width: 100%;
}
.charsheet .form-container.armor-grid .description {
  display: flex;
  flex-direction: column;
  grid-area: description;
  width: 100%;
}
.charsheet .form-container.armor-grid .description textarea{
  margin-bottom: 0px;
}
.charsheet .table-container input:checked + .details-container.armor {
  display: flex;
}

/* ARMORS REVAMPED STYLES END  */

/* WEAPONS REVAMPED STYLES START  */

.charsheet .table-container .headers-container .header2.name5 {
  flex: 10;
  text-align: left;
  padding-left: 5px;
}
.charsheet .table-container .headers-container .header2.burden5 {
  flex: 2;
}
.charsheet .table-container .headers-container .header2.status5 {
  flex: 4;
}
.charsheet .table-container .headers-container .header2.actions5 {
  flex: 2;
}

.charsheet .table-container .table-row .name5{
  font-size: 10px;
  flex: 10;
  text-align: left;
  padding-left: 5px;
  font-weight: bold;
  cursor: default;
}
.charsheet .table-container .table-row .burden5 {
  flex: 2;
  text-align: center;
  cursor: default;
}
.charsheet .table-container .table-row .status5 {
  flex: 4;
  text-align: center;
  cursor: default;
}
.charsheet .table-container .details-container .details-row .details-label2.flex-2{
  flex: 2;
}


.charsheet .table-container .form-container.weapon-grid{
  grid-template-areas:
    "name name status status"
    "burden focus power critrange"
    "wpn-type wpn-type wpn-type dmgtype"
    "description description description description"
    "customroll customroll customroll customroll"
    "close close close close";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:10px;
}
.charsheet .form-container.weapon-grid .picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-area: dropdown;
  width: 100%;
}
.charsheet .form-container.weapon-grid .name {
  display: flex;
  flex-direction: column;
  grid-area: name;
  width: 100%;
}
.charsheet .form-container.weapon-grid .burden {
  flex-direction: column;
  grid-area: burden;
  width: 100%;
}
.charsheet .form-container.weapon-grid .status {
  flex-direction: column;
  grid-area: status;
  width: 100%;
}
.charsheet .form-container.weapon-grid .wpn-type {
  grid-area: wpn-type;
  width: 100%;
}
.charsheet .form-container.weapon-grid .dmgtype {
  grid-area: dmgtype;
  width: 100%;
}
.charsheet .form-container.weapon-grid .focus {
  grid-area: focus;
  width: 100%;
}
.charsheet .form-container.weapon-grid .power {
  grid-area: power;
  width: 100%;
}
.charsheet .form-container.weapon-grid .critrange {
  grid-area: critrange;
  width: 100%;
}
.charsheet .form-container.weapon-grid .description {
  display: flex;
  flex-direction: column;
  grid-area: description;
  width: 100%;
}
.charsheet .form-container.weapon-grid .customroll {
  display: flex;
  flex-direction: column;
  grid-area: customroll;
  width: 100%;
  font-family: "Courier New", Courier, monospace;
}
.charsheet .form-container.weapon-grid .description textarea{
  margin-bottom: 0px;
}
.charsheet .table-container input:checked + .details-container.weapon {
  display: flex;
}

/* WEAPONS REVAMPED STYLES END  */


/* MISC ITEMS REVAMPED STYLES START  */

.charsheet .section-container.misc-inventory {
  min-height: 740px;
  height: 100%;
}
.charsheet .table-container.misc-inventory {
  height: 100%;
}
.charsheet .table-container .headers-container .header2.name6 {
  flex: 8;
  text-align: left;
  padding-left: 5px;
}
.charsheet .table-container .headers-container .header2.amount6 {
  flex: 2;
}
.charsheet .table-container .headers-container .header2.burden6 {
  flex: 2;
}
.charsheet .table-container .headers-container .header2.status6 {
  flex: 4;
}
.charsheet .table-container .headers-container .header2.actions6 {
  flex: 2;
}

.charsheet .table-container .table-row .name6{
  font-size: 10px;
  flex: 8;
  text-align: left;
  padding-left: 5px;
  font-weight: bold;
  cursor: default;
}
.charsheet .table-container .table-row .amount6 {
  flex: 2;
}
.charsheet .table-container .table-row .amount6 input{
  margin-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  height: 15px;
  padding: 0;
  width: 100%;
  border-color: #cccccc;
  background-color: #f0f0f0;
  text-align: center;
  font-size: 12px;
}
.sheet-darkmode .charsheet .table-container .table-row .amount6 input{
  color: #131313;
  border-color: #393939;
  background-color: #bcbcbc;
}
.charsheet .table-container .table-row .burden6 {
  flex: 2;
  text-align: center;
  cursor: default;
}
.charsheet .table-container .table-row .status6 {
  flex: 4;
  text-align: center;
  cursor: default;
}

.charsheet .table-container .form-container.misc-grid{
  grid-template-areas:
    "name name burden status"
    "description description description description"
    "close close close close";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:10px;
}
.charsheet .form-container.misc-grid .picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-area: dropdown;
  width: 100%;
}
.charsheet .form-container.misc-grid .name {
  display: flex;
  flex-direction: column;
  grid-area: name;
  width: 100%;
}
.charsheet .form-container.misc-grid .burden {
  flex-direction: column;
  grid-area: burden;
  width: 100%;
}
.charsheet .form-container.misc-grid .status {
  flex-direction: column;
  grid-area: status;
  width: 100%;
}
.charsheet .form-container.misc-grid .description {
  display: flex;
  flex-direction: column;
  grid-area: description;
  width: 100%;
}
.charsheet .form-container.misc-grid .description textarea{
  margin-bottom: 0px;
}
.charsheet .table-container input:checked + .details-container.misc-item {
  display: flex;
}

/* MISC ITEMS REVAMPED STYLES END  */

/* MOUNTS STYLES START  */

.charsheet .table-container .headers-container .header2.name10 {
  flex: 10;
  text-align: left;
  padding-left: 5px;
}
.charsheet .table-container .headers-container .header2.mtype10 {
  flex: 2;
}
.charsheet .table-container .headers-container .header2.status10 {
  flex: 4;
}
.charsheet .table-container .headers-container .header2.actions10 {
  flex: 2;
}

.charsheet .table-container .table-row .name10{
  font-size: 10px;
  flex: 10;
  text-align: left;
  padding-left: 5px;
  font-weight: bold;
  cursor: default;
}
.charsheet .table-container .table-row .mtype10 {
  flex: 2;
  text-align: center;
  cursor: default;
}
.charsheet .table-container .table-row .status10 {
  flex: 4;
  text-align: center;
  cursor: default;
}
.charsheet .table-container .details-container .details-row .details-label2.flex-2{
  flex: 2;
}


.charsheet .table-container .form-container.mount-grid{
  grid-template-areas:
    "name name  status mtype"
    "hp speed focus power"
    "description description description description"
    "close close close close";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:10px;
}
.charsheet .form-container.mount-grid .name {
  display: flex;
  flex-direction: column;
  grid-area: name;
  width: 100%;
}
.charsheet .form-container.mount-grid .status {
  flex-direction: column;
  grid-area: status;
  width: 100%;
}
.charsheet .form-container.mount-grid .mtype {
  flex-direction: column;
  grid-area: mtype;
  width: 100%;
}
.charsheet .form-container.mount-grid .hp {
  grid-area: hp;
  width: 100%;
}
.charsheet .form-container.mount-grid .speed {
  grid-area: speed;
  width: 100%;
}
.charsheet .form-container.mount-grid .focus {
  grid-area: focus;
  width: 100%;
}
.charsheet .form-container.mount-grid .power {
  grid-area: power;
  width: 100%;
}
.charsheet .form-container.mount-grid .description {
  display: flex;
  flex-direction: column;
  grid-area: description;
  width: 100%;
}
.charsheet .form-container.mount-grid .description textarea{
  margin-bottom: 0px;
}
.charsheet .table-container input:checked + .details-container.mount {
  display: flex;
}

/* MOUNTS REVAMPED STYLES END  */

/* SKILLS REVAMPED STYLES START */
.charsheet .table-container .headers-container .header2.name7 {
  flex: 9;
  text-align: left;
  padding-left: 5px;
}
.charsheet .table-container .headers-container .header2.total7 {
  flex: 2;
}
.charsheet .table-container .headers-container .header2.stat7 {
  flex: 2;
}
.charsheet .table-container .headers-container .header2.points7 {
  flex: 2;
}
.charsheet .table-container .headers-container .header2.misc7 {
  flex: 2;
}

.charsheet .table-container .skill-row {
  font-size: 10px;
  display: flex;
  flex-direction: row;
  width: 100%;
  border-top: #717171 1px solid;
}
.charsheet .table-container .skill-row.no-top {
  border-top: none !important;
}
.charsheet .table-container .skill-row .name {
  font-size: inherit;
  flex: 9;
  text-align: left;
  padding-left: 5px;
}
.charsheet .table-container .skill-row .name button[type="action"],
.charsheet .table-container .skill-row .name button[type="roll"] {
  font-size: inherit;
  font-weight: bold;
  text-transform: capitalize;
  height: 20px;
  text-align: start;
  width: 150px;
}
.charsheet .table-container .skill-row .name button[type="action"]:hover,
.charsheet .table-container .skill-row .name button[type="roll"]:hover {
  color: #b61037;
  border-color: #b61037;
}
.sheet-darkmode .charsheet .table-container .skill-row .name button[type="action"]:hover,
.sheet-darkmode .charsheet .table-container .skill-row .name button[type="roll"]:hover {
  color: #49efc8;
  border-color: #49efc8;
}
.sheet-darkmode .charsheet .table-container .skill-row .name button[type="action"],
.sheet-darkmode .charsheet .table-container .skill-row .name button[type="roll"] {
  color: #131313;
}
.sheet-darkmode .charsheet .table-container .skill-row .name button[type="action"]:hover,
.sheet-darkmode .charsheet .table-container .skill-row .name button[type="roll"]:hover {
  color: #49efc8;
  border-color: #49efc8;
}
.charsheet .table-container .skill-row .name button[type="action"]:active,
.charsheet .table-container .skill-row .name button[type="roll"]:active { 
  color: #ff0000;
  border-color: #ff0000;
}

.charsheet .table-container .skill-row .total {
  font-size: inherit;
  flex: 2;
  text-align: center;
}
.charsheet .table-container .skill-row .total input{
  font-weight: bold;
}
.charsheet .table-container .skill-row .stat {
  font-size: inherit;
  flex: 2;
  text-align: center;
}
.charsheet .table-container .skill-row .points {
  font-size: inherit;
  flex: 2;
  text-align: center;
}
.charsheet .table-container .skill-row .misc {
  font-size: inherit;
  flex: 2;
  text-align: center;
}
.charsheet .table-container .skill-row input[type="number"] {
  border: 0;
  font-size: 11px;
  background: transparent;
  width: 30px !important;
  text-align: center;
  padding: 0;
  color: black;
}
.sheet-darkmode .charsheet .table-container .skill-row input[type="number"] {
  color: #131313;
}
/* SKILLS REVAMPED STYLES END */


/* EXPERTISE STYLES START */
.charsheet .table-container .headers-container .header2.name8 {
  flex: 9;
  text-align: left;
  padding-left: 5px;
}
.charsheet .table-container .headers-container .header2.total8,
.charsheet .table-container .headers-container .header2.skill8,
.charsheet .table-container .headers-container .header2.points8,
.charsheet .table-container .headers-container .header2.misc8{
  flex: 2;
}
.charsheet .table-container .headers-container .header2.actions8 {
  flex: 2;
}

.charsheet .table-container .table-row .name8{
  font-size: 10px;
  flex: 9;
  text-align: left;
  padding-left: 5px;
  font-weight: bold;
  cursor: default;
}
.charsheet .table-container .table-row .total8 input,
.charsheet .table-container .table-row .skill8 input,
.charsheet .table-container .table-row .points8 input,
.charsheet .table-container .table-row .misc8  input{
  border: 0;
  font-size: 11px;
  background: transparent;
  width: 100% !important;
  text-align: center;
  padding: 0;
  color: black;
}
.charsheet .table-container .table-row .total8,
.charsheet .table-container .table-row .skill8,
.charsheet .table-container .table-row .points8,
.charsheet .table-container .table-row .misc8 {
  flex: 2;
  text-align: center;
  cursor: default;
}
.charsheet .table-container .table-row .actions.action8 {
  flex: 2;
}
.charsheet .table-container .table-row  .name-button.name8 button{
  width: 160px;
}
.charsheet .table-container .table-row  .name-button.name8 span{
  width: 160px;
  text-align: start;
  justify-content: start;
}

.charsheet .table-container .form-container.expertise-grid{
  grid-template-areas:
    "name name skill"
    "close close close";
    grid-template-columns: 1fr 1fr 1fr;
    gap:10px;
}
.charsheet .form-container.expertise-grid .name {
  display: flex;
  flex-direction: column;
  grid-area: name;
  width: 100%;
}
.charsheet .form-container.expertise-grid .skill {
  flex-direction: column;
  grid-area: skill;
  width: 100%;
}
/* EXPERTISE STYLES END */


/* CRAFTING AND GATHERING STYLES START  */

.charsheet .table-container.artabilities {
  min-height:300px;
}
.charsheet .table-container.artabilities .item-container{
  margin-bottom: 0px;
} 

.charsheet .table-container .headers-container .header2.name9 {
  flex: 10;
  text-align: left;
  padding-left: 5px;
}
.charsheet .table-container .headers-container .header2.cost9 {
  flex: 4;
}
.charsheet .table-container .headers-container .header2.actions9 {
  flex: 2;
}

.charsheet .table-container .table-row .name9{
  font-size: 10px;
  flex: 10;
  text-align: left;
  padding-left: 5px;
  font-weight: bold;
  cursor: default;
}
.charsheet .table-container .table-row  .name-button.name9 button{
  width: 150px;
}
.charsheet .table-container .table-row  .name-button.name9 span{
  width: 150px;
}
.charsheet .table-container .table-row .cost9 {
  flex: 4;
  text-align: center;
  cursor: default;
}
.charsheet .table-container .table-row .actions9{
  flex: 2;
}

.charsheet .table-container input:checked + .details-container.artability {
  display: flex;
}

.charsheet .table-container .form-container.artability-grid{
  grid-template-areas:
    "dropdown dropdown dropdown dropdown"
    "rolls rolls rolls rolls"
    "close close close close";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:10px;
}
.charsheet .table-container .custom-enabler:checked ~ .artability-grid {
  grid-template-areas:
    "dropdown dropdown dropdown dropdown"
    "name name name name"
    "atype atype costs costs"
    "requirements requirements requirements requirements"
    "description description description description"
    "rolls rolls rolls rolls"
    "close close close close";
}
.charsheet .form-container .picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-area: dropdown;
  width: 100%;
}
.charsheet .form-container .name {
  display: none;
  flex-direction: column;
  grid-area: name;
  width: 100%;
}
.charsheet .form-container .picker.atype {
  display: none;
  grid-area: atype;
  width: 100%;
}
.charsheet .form-container input:checked + .picker.atype {
  display: flex;
}
.charsheet .form-container .block-textarea.requirements-ba {
  min-height: 25px;
  height: 25px;
}
.charsheet .form-container .costs {
  display: none;
  flex-direction: column;
  align-items: center;
  grid-area: costs;
  width: 100%;
}
.charsheet .form-container .requirements {
  display: none;
  flex-direction: column;
  align-items: center;
  grid-area: requirements;
  width: 100%;
}
.charsheet .form-container .description {
  display: none;
  flex-direction: column;
  align-items: center;
  grid-area: description;
  width: 100%;
}
.charsheet .form-container .picker.rolls {
  display: flex;
  grid-area: rolls;
  width: 100%;
  flex-direction: column;
}
.charsheet .form-container .custom-macro {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 5px;
}
.charsheet .form-container input:checked + .custom-macro {
  display: flex;
}
.charsheet .form-container .custom-macro .block-textarea {
  font-size: 10px;
  margin:0px;
  min-height: 60px;
  height: 60px;
}
/* CRAFTING AND GATHERING STYLES END  */


/* LANGUAGE AND PROFICIENCIES STYLES START */

.charsheet .table-container.lang-prof textarea{
  width: 100%;
  min-height: 100px;
  height: 100px;
  resize: vertical;      /* Allows user to resize vertically */
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  font-size: 12px;
  margin-top: 5px;
}
.sheet-darkmode .charsheet .table-container.lang-prof textarea{
  color: #131313;
}
.charsheet .table-container.npc-notes textarea{
  width: 100%;
  min-height: 400px;
  height: 400px;
  resize: vertical;      /* Allows user to resize vertically */
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  font-size: 12px;
  margin-top: 5px;
}
.sheet-darkmode .charsheet .table-container.npc-notes textarea{
  color: #131313;
}
.charsheet .table-container.general-notes textarea{
  width: 100%;
  min-height: 590px;
  height: 590px;
  resize: vertical;      /* Allows user to resize vertically */
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  font-size: 12px;
  margin-top: 5px;
}
.sheet-darkmode .charsheet .table-container.general-notes textarea{
  color: #131313;
}

/* LANGUAGE AND PROFICIENCIES STYLES END */


/* SETUP STYLES START */
.charsheet .table-container.setup .table-body {
  display: flex;
  flex-direction: column;
  padding:5px;
}
.charsheet .table-container.setup .table-body .setup-row{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-bottom: 5px;
}
.charsheet .table-container.setup .table-body .setup-pair{
  flex:1;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100%;
  gap: 10px;
}
.charsheet .table-container.setup .table-body .setup-row label{
  font-size: 15px;
  font-weight: bold;
  align-self: center;
  margin-bottom: 0px;
  width: auto;
}
.charsheet .table-container.setup .table-body .setup-row input[type="number"],
.charsheet .table-container.setup .table-body .setup-row input[type="text"]{
  min-width: 40px;
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
}
.charsheet .table-container.setup .table-body .setup-row input[type="number"].disabled,
.charsheet .table-container.setup .table-body .setup-row input[type="text"].disabled{
  background: #f0f0f0;
  pointer-events: none;
  color: #a0a0a0;
  border: none;
}

/* SETUP STYLES END */


/* FOOTER */
.charsheet .footer{
  display: flex;
  justify-content: center;
  margin-bottom: -30px;
}

.charsheet .footer-stamp img{
  width: 50px;
  height: 50px;
}
.sheet-darkmode .charsheet .footer-stamp img{
  filter: invert(1);
}

/* FOOTER */


/* DEFAULT TEMPLATE STYLES START */
.sheet-rolltemplate-default td{
  line-height:2;
}
/* DEFAULT TEMPLATE STYLES END */

/* NPC STUFF START */
.charsheet .sheet-section-npc-header {
  display: block;
  position: relative;
}

.charsheet .sheet-section-npc .header-details-content {
  display: grid;
  grid-template-areas:
    "name rank type danger size";
  grid-template-columns: 3fr 1fr 2fr 1fr 1fr;
  gap: 10px;
  row-gap: 0px;
  height: 100%;
  width: 100%;
  margin-top: 10px;
}

.charsheet .header-details-content .rank {
  grid-area: rank;
}

.charsheet .header-details-content .type {
  grid-area: type;
}

.charsheet .header-details-content .danger {
  grid-area: danger;
}

.charsheet .header-details-content .size {
  grid-area: size;
}
.charsheet .header-details-content label {
  margin-bottom: 0px;
}

.charsheet .npc-sheet-content {
  padding-top: 8px;
  width: 100%;
  box-sizing: border-box;
  gap: 10px;
}

.charsheet .npc-left-column {
  width: 300px;
}
.charsheet .npc-right-column {
  width: calc(100% - 300px);
}

.charsheet .sheet-section-npc .section-container {
  border-width: 12px;
}

.charsheet .npc-main-stats {
  display: grid;
  grid-template-areas:
    "focus    power"
    "agility  toughness";
  grid-template-columns: 1fr 1fr;
}
.charsheet .sheet-section-npc .derived-stats {
  grid-template-areas:
    "accuracy damage"
    "evasion dodge"
    "guard blocking"
    "save-bonus potency"
    "initiative speed";
}
.charsheet .derived-stats .accuracy {
  grid-area: accuracy;
}
.charsheet .derived-stats .damage {
  grid-area: damage;
}

.charsheet .npc-sub-stats {
  display: flex;
}

.charsheet .sheet-section-npc .attribute-container2 .label {
  width: 128px;
  margin-left: -33px;
}

.charsheet .sheet-section-npc .value input {
  cursor: text !important;
}

.charsheet .npc-button-container {
  position: relative;
}
.charsheet .npc-button,
.charsheet .npc-icon {
  position: absolute;
  width: 15px;
  height: 15px;
  top: -10px;
  right: -12px;
}
.charsheet .npc-button {
  cursor: pointer;
  opacity: 0;
  z-index: 9999;
}
.charsheet .npc-icon {
  font-size: 15px !important;
}

.charsheet .npc-autocalculate,
.charsheet .npc-autocalculate + span {
  position: absolute;
  width: 60px;
  height: 16px !important;
  top: -18px;
  right: 12px;
}
.charsheet .npc-autocalculate {
  cursor: pointer;
  opacity: 0;
  z-index: 9999;
}
.charsheet .npc-autocalculate + span {
  font-size: 9px;
  background: #333;
  color: #eee;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
}
.charsheet .npc-autocalculate:checked + span {
  background: #0a0;
  color: #fff;
}
.charsheet .npc-autocalculate + span::before {
  text-transform: uppercase;
  content: "Manual";
}
.charsheet .npc-autocalculate:checked + span::before {
  content: "Autocalc";
}

.charsheet .sheet-section-npc .custom {
  display: flex;
}
.charsheet .sheet-section-npc .table-container input:checked + .details-container.ability {
  display: flex;
}

.charsheet .sheet-section-npc .table-container .npcaction-grid {
  grid-template-areas:
    "name name name name"
    "keywords keywords range costs"
    "requirements requirements requirements requirements"
    "description description description description"
    "rolls rolls rolls rolls"
    "close close close close";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap:10px;
}

.charsheet .sheet-section-npc .table-container .npcability-grid {
  grid-template-areas:
    "name name name name"
    "description description description description"
    "close close close close";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap:10px;
}

/* NPC STUFF END */

/* FULL VITALS START */
.charsheet .partial-vitals-block,
.charsheet .full-vitals-block {
  display: none;
}
.charsheet .full-vitals-toggle:not(:checked) ~ .partial-vitals-block {
  display: flex;
  flex-direction: row;
  gap: 5px;
}
.charsheet .full-vitals-toggle:checked ~ .full-vitals-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* FULL VITALS END */

/* NPC TABLES START */
.charsheet .table-container .npc-skill-name {
  flex: 6;
  text-align: left !important;
  padding-left: 5px;
}
.charsheet .table-container .npc-skill-name select {
  text-align: left;
}
.charsheet .table-container .npc-skill-expertise {
  flex: 5;
}

.charsheet .table-container .npc-action-name,
.charsheet .table-container .npc-ability-name {
  flex: 8;
  text-align: left !important;
  padding-left: 5px;
}

.charsheet .table-container .npc-skill-total,
.charsheet .table-container .npc-skill-stat,
.charsheet .table-container .npc-skill-base,
.charsheet .table-container .npc-skill-actions,
.charsheet .table-container .npc-action-cost,
.charsheet .table-container .npc-action-range {
  text-align: center;
  flex: 2;
}

.charsheet .table-container .npc-action-actions,
.charsheet .table-container .npc-ability-actions {
  flex: 2;
}

.charsheet .table-container .table-row .npc-skill-name,
.charsheet .table-container .table-row .npc-action-name,
.charsheet .table-container .table-row .npc-ability-name {
  font-size: 10px;
  font-weight: bold;
  cursor: default;
}
.charsheet .table-container .table-row .npc-skill-expertise input,
.charsheet .table-container .table-row .npc-skill-total input,
.charsheet .table-container .table-row .npc-skill-stat input,
.charsheet .table-container .table-row .npc-skill-base input,
.charsheet .table-container .table-row .npc-action-range input,
.charsheet .table-container .table-row .npc-action-cost input {
  border: 0;
  font-size: 11px;
  background: transparent;
  width: 100% !important;
  text-align: center;
  padding: 0;
  color: black;
}
.charsheet .table-container .table-row .npc-skill-expertise,
.charsheet .table-container .table-row .npc-skill-total,
.charsheet .table-container .table-row .npc-skill-stat,
.charsheet .table-container .table-row .npc-skill-base,
.charsheet .table-container .table-row .npc-action-range input,
.charsheet .table-container .table-row .npc-action-cost input {
  text-align: center;
  cursor: default;
}
/* NPC TABLES END/