.npc-input {
  /*  width: 100% !important;
  height: 100% !important;	*/
  padding: 0;
  margin: 0;
}

.npc-sheet {
  /* width: 100% !important;
  height: 100% !important;  */
  padding: 0;
  margin: 0;
}

.npc-input .window-content {
  padding: 5px;
  background: url(../../../ui/parchment.jpg) repeat !important;
}

.npc-sheet .window-content {
  padding: 5px;
  background: url(../../../ui/parchment-white.jpg) repeat !important;
  overflow-x: scroll;
}

.npc-sheet .gga-app {
  height: 100% !important;
}

.npc-input .gga-app {
  height: 100% !important;
}

.npc-input-ta {
  height: 100% !important;
  padding: 5px !important;
  border: none;
  overflow: auto;
}

.npc-sheet-ci {
  grid-area: ci;
  height: 100%;
  width: 100%;
}

.npc-input-grid-container {
  width: 100% !important;
  height: 100% !important;
  display: grid;
  grid-template-columns: 250px 1fr 50%;
  grid-template-rows: 60px 130px 2fr 2fr 2fr 45px;
  gap: 5px 5px;
  grid-template-areas:
    'top     top    top'
    'attr    notes  notes'
    'melee   melee  ranged'
    'traits  traits skills'
    'equip   equip  spells'
    'import  import create';
}

.npc-sheet-grid-container-ci {
  width: 100% !important;
  height: 100% !important;
  display: grid;
  grid-template-columns: min-content 245px 50%;
  /* grid-template-rows: auto auto auto auto auto; */
  gap: 5px;
  grid-template-areas:
    'top   top       top'
    'portrait   attr      notes'
    'condition  condition  condition'
    'melee      melee     ranged'
    'traits     traits    skills'
    'equip      equip     spells';
}

.npc-sheet-grid-container {
  width: 100% !important;
  height: 100% !important;
  display: grid;
  grid-template-columns: min-content 1fr 50%;
  /* grid-template-rows: auto auto auto auto auto auto; */
  gap: 5px;
  grid-template-areas:
    'top  top        top'
    'portrait  attr       notes'
    'condition condition  condition'
    'melee     melee      ranged'
    'traits    traits     skills'
    'equip     equip      spells';
}

.npc-sheet-grid-container-ci #portrait .img-display,
.npc-sheet-grid-container #portrait .img-display {
  width: 8em;
  height: 100%;
}

.npc-input-create {
  grid-area: create;
  align-self: center;
  padding: 5px 50px 5px 50px;
}

.npc-input-import {
  grid-area: import;
  align-self: center;
  padding: 5px 50px 5px 50px;
}

.npc-input-top {
  display: grid;
  grid-template-columns: 40px 2fr 40px 2fr;
  grid-template-rows: 0fr 1fr;
  gap: 5px 5px;
  grid-template-areas:
    'nm nm-val title title-val'
    'desc desc-val desc-val desc-val';
  grid-area: top;
}

.npc-input-nm {
  grid-area: nm;
}

.npc-input-nm-val {
  grid-area: nm-val;
}

.npc-input-title {
  grid-area: title;
}

.npc-input-title-val {
  grid-area: title-val;
}

.npc-input-desc-val {
  grid-area: desc-val;
}

.npc-input-desc {
  grid-area: desc;
}

.npc-input-notes {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: 1fr;
  gap: 5px;
  grid-template-areas: 'ci nt-val';
  grid-area: notes;
}

.npc-input-nt {
  grid-area: nt;
  align-self: end;
}

.npc-input-nt-val {
  grid-area: nt-val;
  height: 100%;
  overflow: var(--of);
  border: 1px solid rgb(125, 125, 125);
  padding: 3px;
  display: grid;
  grid-template-rows: auto;
  grid-gap: 4px 0;
}

.npc-input-traits {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5em 1fr;
  /* gap: 5px 5px; */
  grid-template-areas:
    'tr'
    'tr-val';
  grid-area: traits;
  border: 1px solid rgb(125, 125, 125);
}

.npc-input-tr {
  grid-area: tr;
  align-self: end;
}

.npc-header {
  background-color: black;
  color: white;
  height: 100%;
  padding-left: 4px;
  /* padding-top: calc(0.5em / 3); */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.npc-input-tr-val {
  grid-area: tr-val;
}

.npc-trait-row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.npc-input-skills {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5em 1fr;
  /* gap: 5px 5px; */
  grid-template-areas:
    'sk'
    'sk-val';
  grid-area: skills;
  border: 1px solid rgb(125, 125, 125);
}

.npc-input-sk {
  grid-area: sk;
  align-self: end;
}

.npc-input-sk-val {
  grid-area: sk-val;
}

.npc-input-spells {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5em 1fr;
  gap: 5px 5px;
  grid-template-areas:
    'sp'
    'sp-val';
  grid-area: spells;
  border: 1px solid rgb(125, 125, 125);
}

.npc-input-equip {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5em 1fr;
  /* gap: 5px 5px; */
  grid-template-areas:
    'eqt'
    'eqt-val';
  grid-area: equip;
  border: 1px solid rgb(125, 125, 125);
}

.npc-input-sp {
  grid-area: sp;
  align-self: end;
}

.npc-input-sp-val {
  grid-area: sp-val;
}

.npc-input-eqt {
  grid-area: eqt;
  align-self: end;
}

.npc-input-eqt-val {
  grid-area: eqt-val;
}

.npc-sheet-sk-val {
  grid-area: sk-val;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr 2em 0fr;
  grid-auto-rows: fit-content(30px);
  gap: 1px 4px;
}

.npc-sheet-sp-val {
  grid-area: sp-val;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr 2em 0fr;
  grid-auto-rows: fit-content(30px);
  gap: 1px 4px;
}

.npc-sheet-eqt-val {
  grid-area: eqt-val;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1em 1em 1fr 3em 3em;
  grid-auto-rows: fit-content(30px);
  /* gap: 1px 2px; */
}

.npc-sheet-eqt-val .equipped {
  padding-left: 2px;
}

.npc-sheet-eqt-val .qty,
.npc-sheet-eqt-val .sum_cost,
.npc-sheet-eqt-val .sum_weight {
  text-align: right;
}

.npc-sheet-eqt-val .sum_weight {
  padding-right: 2px;
}

.npc-sheet-ra-val .desc:nth-child(8n + 1),
.npc-sheet-me-val .desc:nth-child(6n + 1),
.npc-sheet-sk-val .desc:nth-child(odd),
.npc-sheet-sp-val .desc:nth-child(odd),
.npc-sheet-eqt-val .desc:nth-child(10n + 3),
.npc-input-traits .desc:nth-child(odd),
.npc-input-nt-val .desc:nth-child(even),
.npc-sheet-eqt-val .sum_cost:nth-child(10n + 4),
.npc-sheet-eqt-val .sum_weight:nth-child(10n + 5),
.npc-sheet-eqt-val .qty:nth-child(10n + 2),
.npc-sheet-eqt-val .equipped:nth-child(10n + 1) {
  background-color: rgba(0, 0, 0, 0.15);
}

.npc-input-melee {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5em 1fr;
  /* gap: 1px 4px; */
  grid-template-areas:
    'me'
    'me-val';
  grid-area: melee;
  border: 1px solid rgb(125, 125, 125);
}

.npc-input-me {
  grid-area: me;
  align-self: end;
}

.npc-input-me-val {
  grid-area: me-val;
}

.npc-sheet-me-val {
  grid-area: me-val;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 5fr 2em 1.5fr;
  grid-auto-rows: fit-content(30px);
  gap: 1px 4px;
  padding-right: 4px;
}

.npc-input-ranged {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5em 1fr;
  /* gap: 1px 4px; */
  grid-template-areas:
    'ra'
    'ra-val';
  grid-area: ranged;
  border: 1px solid rgb(125, 125, 125);
}

.npc-input-ra {
  grid-area: ra;
  align-self: end;
}

.npc-input-ra-val {
  grid-area: ra-val;
}

.npc-sheet-ra-val {
  grid-area: ra-val;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 5fr 2em 2em max-content;
  grid-auto-rows: fit-content(30px);
  gap: 1px 4px;
  padding-right: 4px;
}

.npc-input-attr {
  padding: 2px 4px;
  border: 1px solid black;
  border-radius: 3px;
  /* background-color: rgb(235, 235, 255); */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1.5em);
  /* gap: 2px 3px; */
  grid-template-areas:
    'st st-val hp hp-val spd spd-val'
    'dx dx-val will will-val mov mov-val'
    'iq iq-val per per-val sm sm-val'
    'ht ht-val fp fp-val dr dr-val'
    'dmg dmg-val parry parry-val dodge dodge-val';
  grid-area: attr;
  font-size: 110%;
  /* height: 100%; */
  align-content: space-between;
  /* justify-content: space-between; */
}

.npc-input-attr.gurps > div {
  /* background: rgba(0,0,0,0.1); */
}

.npc-input-label {
  align-self: center;
  text-align: center;
  padding: 0px 2px 0px 0px;
}

.npc-input-labelr {
  align-self: center;
  text-align: right;
  padding: 0px 2px 0px 0px;
}

.npc-sheet-centered {
  align-self: center;
  text-align: center;
  padding: 0px 1px 0px 0px;
}

.npc-sheet-label {
  align-self: center;
  text-align: left;
  padding: 0px 1px 0px 0px;
}

.npc-input-st {
  grid-area: st;
}

.npc-input-st-val {
  grid-area: st-val;
}

.npc-input-hp-val {
  grid-area: hp-val;
}

.npc-input-hp-val,
.npc-input-fp-val {
  grid-gap: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.npc-input-hp {
  grid-area: hp;
}

.npc-input-spd {
  grid-area: spd;
}

.npc-input-spd-val {
  grid-area: spd-val;
}

.npc-input-dx {
  grid-area: dx;
}

.npc-input-dx-val {
  grid-area: dx-val;
}

.npc-input-will {
  grid-area: will;
}

.npc-input-will-val {
  grid-area: will-val;
}

.npc-input-mov {
  grid-area: mov;
}

.npc-input-mov-val {
  grid-area: mov-val;
}

.npc-input-iq {
  grid-area: iq;
}

.npc-input-iq-val {
  grid-area: iq-val;
}

.npc-input-per {
  grid-area: per;
}

.npc-input-per-val {
  grid-area: per-val;
}

.npc-input-ht {
  grid-area: ht;
}

.npc-input-ht-val {
  grid-area: ht-val;
}

.npc-input-fp {
  grid-area: fp;
}

.npc-input-fp-val {
  grid-area: fp-val;
}

.npc-input-sm {
  grid-area: sm;
}

.npc-input-sm-val {
  grid-area: sm-val;
}

.npc-input-dodge {
  grid-area: dodge;
}

.npc-input-dodge-val {
  grid-area: dodge-val;
}

.npc-input-parry {
  grid-area: parry;
}

.npc-input-parry-val {
  grid-area: parry-val;
}

.npc-input-dr {
  grid-area: dr;
}

.npc-input-dr-val {
  grid-area: dr-val;
}

.npc-input-dmg {
  grid-area: dmg;
}

.npc-input-dmg-val {
  grid-area: dmg-val;
  white-space: nowrap;
}

.npc-input-img {
  grid-area: img;
  align-self: center;
}

.npc-input-sm2 {
  border-width: 0px !important;
  border: none !important;
  height: 100% !important;
  max-width: 2em;
  padding: 1px !important;
}

.npc-input-sm3 {
  border-width: 0px !important;
  border: none !important;
  height: 100% !important;
  max-width: 3em;
  padding: 1px !important;
}

/* Had to focefully overwrite the input css from elsewhere */
.npc-input-2 {
  font: 400 19px sans-serif;
  height: 100% !important;
  min-width: 2em !important;
  padding: 1px !important;
  font-weight: 700;
  /* font-size: 120% !important;; */
  font-family: 'Roboto', sans-serif !important;
  width: 100% !important;
}
