.ui-dialog .charsheet {
    padding: 0px;
  }
  
  
.sheet-main {
  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Farsight%20RPG%20Community%20Edition/images/farsight.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 980px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/*----------------- TEMPLATE CSS -----------------*/

/* configure the tab buttons */
.sheet-main .pgsheet, 
.sheet-main .npcsheet, 
.sheet-main .vehiclesheet, 
.sheet-main .shipsheet {
  display: none;
}

/* style the active button */
.sheet-main .sheet-templatetoggle[value="pg"] ~ div .sheet-buttonpg {
  outline: 2px solid red;
}

.sheet-main .sheet-templatetoggle[value="npc"] ~ div .sheet-buttonnpc {
  outline: 2px solid red;
}

.sheet-main .sheet-templatetoggle[value="vehicle"] ~ div .sheet-buttonvehicle {
  outline: 2px solid red;
}

.sheet-main .sheet-templatetoggle[value="ship"] ~ div .sheet-buttonship {
  outline: 2px solid red;
}

/* show the selected tab */
.sheet-main .sheet-templatetoggle[value="pg"] ~ div.pgsheet, 
.sheet-main .sheet-templatetoggle[value="npc"] ~ div.npcsheet, 
.sheet-main .sheet-templatetoggle[value="vehicle"] ~ div.vehiclesheet, 
.sheet-main .sheet-templatetoggle[value="ship"] ~ div.shipsheet {
  display: block;
}

.template {
  margin-bottom: 10px;
  clip-path: polygon(0 20px,20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px));
  background-color: rgba(0, 0, 0, 0.7);
  display: grid;
  grid-template-columns: 900px;
  grid-template-rows: 60px;
  justify-self: center;
  text-align: center;
  align-items: center;
}

/*----------------- GENERAL CSS ------------------*/

.section {
  background-color: #424549;
  clip-path: polygon(0 20px,20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px));
  background: rgba(0, 0, 0, 0.7);
}
  
.sheet-section {
  padding: 5px;
  border-style: solid;
}

.largedialog label{
  width: auto;
}

label.titolosezione {
  text-align: center;
  margin-top: 20px;
}

.repcontainer{
  margin-top: 0px;
}

 .repcontrol{
   width: 300px;
   padding-bottom: 25px;
 }
  
.repitem{
  grid-area: repeat-condizioni;
  align-items: center;
  margin-left: 20px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 150px 30px 90px;
  grid-template-areas:
    "titolo roll toggle"
    "descrizione descrizione descrizione";
}
  
input.titolo{
  grid-area: titolo;
  width: auto;
}

textarea.descrizione{
  grid-area: descrizione;
  max-width: 250px !important;
  height: 80px !important;
  background-color: white;
  margin-top: 10px;
}

input.sheet-toggle-show{
  grid-area: toggle;
  margin-left: 10px;
  margin-bottom: 5px;
}

input.sheet-toggle-show:not(:checked) ~ .descrizione {
  display: none;
}

span.sheet-toggle-show{
  grid-area: toggle;
  margin-left: 25px;
  font-size: 8px;
}

.text-white {
  color: white;
}

.sheet-rolltemplate-base {
  background-color: #424549;
  clip-path: polygon(0 20px,20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px));
  background: rgba(0, 0, 0, 0.3);
  min-height: 60px;
}

.sheet-rolltemplate-base .sheet-template-title {
  color: white;
  text-align: center;
  height: fit-content;
  padding: 20px;
  align-self: center;
  font-weight: bold;
}

.sheet-rolltemplate-base span {
  text-align: center;
}

.sheet-rolltemplate-base .sheet-rolls {
  display: grid;
  grid-template-columns: 45% 45%;
  column-gap: 10%;
  padding-bottom: 20px;
  padding-right: 20px;
  padding-left: 20px;
  grid-auto-rows: 30px;
}

.sheet-rolltemplate-base .sheet-roll-title  {
  height: fit-content;
  align-self: center;
}

.sheet-rolltemplate-base .sheet-roll-result  {
  height: fit-content;
  align-self: center;
}

.sheet-rolltemplate-base .sheet-roll div:nth-child(odd)  {
  text-align: right; 
}
.sheet-rolltemplate-base .sheet-roll div:nth-child(even)  {
  text-align: left; 
}

/*------------- Tab CSS ----------------*/

/* configure the tab buttons */
.charsheet .sheet-character, .charsheet .sheet-powers, .charsheet .sheet-biography {
  display: none;
}

/* style the active button */
.charsheet .sheet-tabstoggle[value="character"] ~ div .sheet-button0 {
  outline: 2px solid red;
}

.charsheet .sheet-tabstoggle[value="powers"] ~ div .sheet-button1 {
  outline: 2px solid red;
}

.charsheet .sheet-tabstoggle[value="biography"] ~ div .sheet-button2 {
  outline: 2px solid red;
}

/* show the selected tab */
.charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character, 
.charsheet .sheet-tabstoggle[value="powers"] ~ div.sheet-powers, 
.charsheet .sheet-tabstoggle[value="biography"] ~ div.sheet-biography {
  display: block;
}

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

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

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

.pg {
  justify-content: center;
  padding-bottom: 10px;
  display: grid !important;
  min-width: 980px;
  grid-gap: 4px;
  grid-template-columns: 300px 300px 300px ;
  grid-template-rows: 100px 60px auto 135px;
  grid-template-areas:
    "common common header"
    "tabs tabs tabs"
    "sheet sheet sheet"
    "attribution attribution attribution";
}

.character {
  display: grid;
  min-width: 980px;
  grid-gap: 4px;
  grid-template-columns: 300px 300px 300px ;
  grid-template-rows: 350px min-content;
  grid-template-areas:
    "skill health stats"
    "skill attack traits";
}

.powers {
  display: grid;
  min-width: 980px;
  grid-gap: 4px;
  grid-template-columns: 300px 300px 300px ;
  grid-template-rows: min-content;
  grid-template-areas:
    "power power power";
}

.biography {
  display: grid;
  min-width: 980px;
  grid-gap: 4px;
  grid-template-columns: 300px 300px 300px ;
  grid-template-rows: 180px min-content;
  grid-template-areas:
    "inv finance aspect "
    "inv personality aspect";
}

.tabs {
  grid-area: tabs;
  text-align: center;
  align-content: center;
  clip-path: polygon(0 20px,20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px));
  background-color: rgba(0, 0, 0, 0.7)
}

/*------------- Input CSS--------------------------*/

input[type="text"] {
  border-style: none none none none;
  border-color: transparent;
  background-color: #E5E7E9;
  padding-bottom: 5px;
}

.ui-dialog .charsheet input[type=text]{
  height: 20px;
}

input[type="number"] {
  border: none;
  background-color: #E5E7E9;
}

input[type="number"].esagono{
  position:absolute;
  overflow:hidden;
  z-index:0;
  height: 50px;
  text-align: center;
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  width: 45px !important;
  height: 45px !important;
}

input[type="number"].esagonosmall{
  margin-top: 10px;
  overflow:hidden;
  z-index:0;
  height: 30px;
  width: 30px !important;
  text-align: center;
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}

button.btn.repcontrol_add{
  margin-left: 20px;
  margin-right: 20px;
}

button.btn.repcontrol_edit{
  margin-left: 20px;
  margin-right: 20px;
}


.ui-dialog .charsheet input[type=number].main-skill{
  height:40px;
  margin-left:25px;
  text-align: center;
}

.ui-dialog .charsheet input[type=number].sub-skill{
  height:16px;
  width: 30px;
  text-align: center;
  margin-left:0px;
}

.ui-dialog .charsheet input[type=number].tot-sub-skill{
  height:16px;
  width: 30px;
  text-align: center;
  margin-left:0px;
}

textarea {
  width: 260px;
  height: 80px;
}

input[type="checkbox"]{
  width: 15px;
}

input[type="checkbox"].sheet-checkbox {
  background-image: none;
}


input[type=number].sheet-ref::-webkit-inner-spin-button, input[type=number].sheet-ref::-webkit-outer-spin-button, input[type=number].sheet-txtfield::-webkit-inner-spin-button, input[type=number].sheet-txtfield::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number].sheet-ref, input[type=number].sheet-txtfield {
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

input[type=number]::-webkit-inner-spin-button{
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
  
/*------------- Section-specific CSS -------------*/
  
.sheet-header {
  grid-area: header;
  background-image:url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Farsight%20RPG%20Community%20Edition/images/farsight%20logo.png");
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
}

.sheet-shortbio {
  align-items: center;
  justify-items: center;
  grid-area: common;
  display: grid;
  grid-template-columns: 300px 150px 150px;
  grid-template-rows: auto;
  grid-template-areas: 
    "nome giocatore giocatore"
    "concetto specie classelivello";
}

input[type="text"].nome{
  grid-area: nome;
  width: 250px;
}

input[type="text"].giocatore{
  grid-area: giocatore;
  width: 250px;
  justify-self: left;
}

input[type="text"].concetto{
  grid-area: concetto;
  width: 250px;
}

input[type="text"].specie{
  grid-area: specie;
  width: 140px;
  justify-self: left;
}

div.classelivello{
  grid-area: classelivello;
  justify-self: left; 
}

select.classe{
  align-items: center;
  max-width: 65px;
  margin-bottom: 0px;
}

input[type="number"].livello{
  max-width: 65px;
  max-height: 20px;
}

/*--------ATTRIBUTION SECTION------*/

.attribuzione {
  grid-area: attribution;
  padding: 25px;
  text-align: justify;
}

  /*--------SKILL SECTION---------*/
.sheet-skill {
  grid-area: skill;
  max-height: 1180px;
  padding-bottom: 25px;
}

.sheet-main-skill{
  margin-top: 20px !important;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 2px;
  text-align: center;
  align-items: center;
  display: grid;
  grid-template-columns: 55px 130px 35px 35px;
  grid-template-rows: 20px;
  grid-gap: 10px;
  grid-template-areas:"input button . tot";
}

.sheet-sub-skill{
  display: grid;
  align-items: center;
  grid-template-columns: 55px 130px 35px 35px;
  grid-gap: 10px;
  grid-template-rows: 16px;
  grid-template-areas:". button input tot";
  margin-top: 2px;
  margin-left: 5px;
  margin-right: 5px;
}

input[class="main-skill"]{
  grid-area: input;
}

input[type="number"].main-skill{
  margin-left: 10px !important;
}

button[type="roll"].main-skill.btn.ui-draggable::before{
  content: "";
  border: none;
  grid-area: button;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  height: 15px;
  width: auto;
}

button[type="roll"].main-skill.btn.ui-draggable{
  border: none;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  grid-area: button;
  height: 15px;
  width: auto;
  line-height: 15px;
}

label[class="skill-tot"]{
  grid-area: tot;
  font-size: 12px;
  font-weight: bold;
  margin: 3px !important;
}

input[class="sub-skill"]{
  grid-area: input;
  height: 16px;
}
  
button[type="roll"].sub-skill.btn.ui-draggable::before{
  content: "";
  border: none;
  font-weight: bold;
  font-size: 10px;
  text-align: center;
  grid-area: button;
  height: 10px;
  width: auto; 
}

button[type="roll"].sub-skill.btn.ui-draggable{
  border: none;
  font-weight: bold;
  font-size: 10px;
  text-align: center;
  grid-area: button;
  height: 10px;
  width: auto;
  line-height: 10px;
}

input[class="tot-sub-skill"]{
  grid-area: tot;
  height: 16px;
}

/*---------HEALTH SECTION-----------*/
.sheet-health {
  grid-area: health;
}

input[type="number"].puntivitalita{
  margin-left: 44px;
  margin-top: 40px;
}

label[class="puntivitalita"]{
  position:absolute;
  overflow:hidden;
  z-index:0;
  margin-left: 70px;
  margin-top: 15px;
}

input[type="number"].puntivitalitamax{
  margin-left: 20px;
}

label[class="sogliamorte"]{
  position:absolute;
  overflow:hidden;
  z-index:0;
  margin-left: 10px;
  width: 30px;
  line-height: 1;
  font-size: 10px;
}

input[type="number"].sogliamorte{
  margin-top: 44px;
  margin-left: 10px;
}

.salvezzamorte{
  display: grid;
  grid-template-columns: 150px 75px 75px;
  grid-template-rows: 20px 16px 16px;
  grid-template-areas:
  ". salvezzamorte salvezzamorte"
  ". labelsuccesso checkboxsuccesso"
  ". labelfallimento checkboxfallimento";
  justify-items: flex-start;
}

label[class="salvezzamorte"]{
  grid-area: salvezzamorte;
  font-size: 10px;
}

label[class="successo"]{
  grid-area: labelsuccesso;
  font-size: 10px;
}

input[type="checkbox"].successo-1{
  grid-area: checkboxsuccesso;
}

input[type="checkbox"].successo-2{
  grid-area: checkboxsuccesso;
  margin-left: 15px;
}

input[type="checkbox"].successo-3{
  grid-area: checkboxsuccesso;
  margin-left: 30px;
}

label[class="fallimento"]{
  grid-area: labelfallimento;
  font-size: 10px;
}

input[type="checkbox"].fallimento-1{
  grid-area: checkboxfallimento;
}

input[type="checkbox"].fallimento-2{
  grid-area: checkboxfallimento;
  margin-left: 15px;
}

input[type="checkbox"].fallimento-3{
  grid-area: checkboxfallimento;
  margin-left: 30px;
}

.affaticamento{
  margin-top: 20px;
  display: grid;
  grid-template-columns: 150px 150px;
  grid-template-rows: 20px 16px;
  grid-template-areas:
    ". label"
    ". checkbox";
  justify-items: flex-start;
}

label[class="affaticamento"]{
  grid-area: label;
  font-size: 10px;
}

input[type="checkbox"].affaticamento-1{
  grid-area: checkbox;
}

input[type="checkbox"].affaticamento-2{
  grid-area: checkbox;
  margin-left: 15px;
}

input[type="checkbox"].affaticamento-3{
  grid-area: checkbox;
  margin-left: 30px;
}

input[type="checkbox"].affaticamento-4{
  grid-area: checkbox;
  margin-left: 45px;
}

input[type="checkbox"].affaticamento-5{
  grid-area: checkbox;
  margin-left: 60px;
}

input[type="checkbox"].affaticamento-6{
  grid-area: checkbox;
  margin-left: 75px;
}

.condizioni{
  display: grid;
  grid-template-columns: 300px;
  grid-template-rows: auto;
  grid-template-areas:
    "label"
    "textarea";
}

label[class="condizioni"]{
  grid-area:label;
  margin-left: 10px;
  font-size: 10px;
  margin-bottom: 5px;
}

textarea[class="textarea"]{
  grid-area: textarea;
  max-width: 260px;
  max-height: 60px;
  margin-left: 15px;
  margin-right: 15px;
}

/*----------STATS SECTION------------*/

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

.stats{
  display: grid;
  grid-template-columns: 75px 150px 75px;
  grid-template-rows: 50px;
  grid-template-areas:"left label right";
  align-items: center;
}

label[class="stat right"]{
  grid-area: label;
  align-items: center;
  text-align: end;
  margin-bottom: unset;
}

label[class="stat left"]{
  grid-area: label;
  align-items: center;
  text-align: start;
  margin-bottom: unset;
}

button[type="roll"].stat.btn.ui-draggable{
  grid-area: label;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  border: 1px;
  border-style: solid;
  height: 10px;
  width: 10px;
  margin-left: 70px;
}

button[type="roll"].stat.btn.ui-draggable::before{
  content: "";
  border: 0px;
  grid-area: label;
  height: 15px;
  width: 15px;
}

input[type="number"].stat.right{
  grid-area: right;
  align-items: center;
  position: unset;
  justify-self: center;

}

input[type="number"].stat.left{
  grid-area: left;
  margin-left: 10px;
  align-items: center;
  position: unset;
  justify-self: center;
}

/*------------ATTACK SECTION-----------*/

.sheet-attack {
  grid-area: attack;
  min-height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  height: min-content;
}

/* Nascondi le righe che non corrispondono alla ricerca */
.sheet-repeating_attacchi[data-display="none"] {
  display: none;
}

/* Mostra le righe che corrispondono alla ricerca */
.sheet-repeating_attacchi[data-display="block"] {
  display: block;
}

div.attacchi {
  font-size: 10px;
}

.attacchi input {
  max-height: 20px;
}

select.arma {
  grid-area: titolo;
  width: auto;
  max-height: 20px;
  font-size: 9px;
  margin-bottom: 0px !important;
}

button[type="roll"].attacco.btn.ui-draggable{
  grid-area: roll;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  border: 1px;
  border-style: solid;
  height: 15px;
  width: 15px;
  align-self: flex-start;
}

button[type="roll"].attacco.btn.ui-draggable::before{
  border: 0px;
  grid-area: tiro;
  height: 15px;
  width: 15px;
}

.descrizioneattacco{
  grid-area:descrizione;
  align-items: center;
  display: grid;
  grid-template-columns: 90px 90px 90px;
  grid-template-rows: auto;
  grid-template-areas:
    "bonusattacco danno tipo"
    "portata munizioni ."
    "dettagli dettagli dettagli";
}

div.bonusattacco {
  grid-area: bonusattacco;
  display: grid;
  grid-template-columns: 90px;
  grid-template-rows: 25px 25px;
  grid-template-areas: 
    "label"
    "input";
}

div.danno {
  grid-area: danno;
  display: grid;
  grid-template-columns: 90px;
  grid-template-rows: 25px 25px;
  grid-template-areas: 
    "label"
    "input";
}

div.tipo {
  grid-area: tipo;
  display: grid;
  grid-template-columns: 90px;
  grid-template-rows: 25px 25px;
  grid-template-areas: 
    "label"
    "input";
}

div.portata {
  grid-area: portata;
  display: grid;
  grid-template-columns: 90px;
  grid-template-rows: 25px 25px;
  grid-template-areas: 
    "label"
    "input";
}

div.munizioni {
  grid-area: munizioni;
  display: grid;
  grid-template-columns: 90px;
  grid-template-rows: 25px 25px;
  grid-template-areas: 
    "label"
    "input";
}

label.bonusattacco{
  grid-area: label;
  align-self: flex-end;
  margin-bottom: auto;
}

input[type="number"].bonusattacco{
  grid-area: input;
  width: 80px !important;
}

label.danno{
  grid-area: label;
  align-self: flex-end;
  margin-bottom: auto;
}

input[type="text"].danno{
  grid-area: input;
  width: 80px !important;
}

label.munizioni{
  grid-area: label;
  align-self: flex-end;
  margin-bottom: auto;
}

input[type="number"].munizioni{
  grid-area: input;
  width: 80px !important;
}

label.portata{
  grid-area: label;
  align-self: flex-end;
  margin-bottom: auto;
}

input[type="text"].portata{
  grid-area: input;
  width: 80px !important;
}

label.tipo{
  grid-area: label;
  align-self: flex-end;
  margin-bottom: auto;
}

input[type="text"].tipo{
  grid-area: input;
  width: 80px !important;
}

div.dettagli {
  grid-area: dettagli;
  display: grid;
  grid-template-columns: 90px;
  grid-template-rows: 25px 70px;
  grid-template-areas: 
    "label"
    "input";
  align-self: flex-start;
}

label.dettagli{
  grid-area: label;
  align-self: flex-end;
  margin-bottom: auto;
}

textarea.dettagli{
  grid-area: input;
  width: 250px !important;
  height: 50px !important;
  margin-left: 0px !important;
}

input.sheet-toggle-show:not(:checked) ~ .attacchi {
  display: none;
}

span.sheet-toggle-show{
  grid-area: toggle;
  margin-left: 25px;
  font-size: 10px;
}

/*----------TRAITS SECTION-------------*/


.sheet-traits {
  grid-area: traits;
  overflow-y: auto;
  overflow-x: hidden;
  height: min-content;
}

/*-----------POWER SECTION-----------*/
.sheet-power {
  grid-area: power;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: 300px 300px 300px;
  grid-template-rows: 180px min-content min-content min-content;
  grid-template-areas: 
    "head head head"
    "praxis illusione metabiosi"
    "metarealta telecinesi telepatia"
    "veggenza . .";
}

.power-head {
  grid-area: head;
}

.power-stats{
  grid-area: head;
  display: grid;
  grid-template-columns: 40px 210px 50px;
  grid-template-rows: 35px;
  grid-template-areas: ". label limite";
}

label[class="puntipsi"]{
  grid-area: label;
  margin-left: 110px;
  margin-bottom: 0px;
  align-self: center;
}

label[class="limitepsionico"]{
  grid-area: limite;
  font-size: 10px;
  text-align: center;
  line-height: 10px;
  margin-bottom: 0px;
  align-self: center;
}

label[class="attaccopsionico"]{
  grid-area: label;
  font-size: 10px;
  margin-left: 5px;
  margin-bottom: 0px;
  align-self: center;
}

label[class=forzapsionica]{
  grid-area: label;
  font-size: 10px;
  margin-left: 25px;
  margin-bottom: 0px;
  align-self: center;
}

input[type="number"].puntipsimax{

  margin-left: 235px;
}

input[type="number"].puntipsi{

  margin-left: 210px;
  margin-top: 40px;
}

input[type="number"].limitepsionico{
  position: absolute;
  margin-left: 260px;
  margin-top: 45px;
}

input[type="number"].attaccopsionico{
  position: absolute;
  margin-left: 10px;
  margin-top: 40px;
}

input[type="number"].forzapsionica{
  position: absolute;
  margin-left: 30px;
  margin-top: 70px;
}

.power{
  display: grid;
  grid-template-columns: 300px;
  grid-template-rows: 25px;
  grid-template-areas:
    "label"
    "repeat-powers";
}

label[class="power"]{
  grid-area: label;
  margin-left: 20px;
  font-size: 10px;
  margin-bottom: 0px;
}

/*----------INVENTORY SECTION-------------*/

.sheet-inv {
  grid-area: inv;
  overflow-y: auto;
  overflow-x: hidden;
  height: min-content;
}

/*----------ASPECT SECTION-------------*/

.sheet-appearance {
  grid-area: aspect;
  overflow-y: auto;
  overflow-x: hidden;
  height: min-content;
}

.aspetto {
  margin-left: 20px;
  margin-right: 20px;
  display: grid;
  grid-template-columns: repeat(2,130px);
  grid-template-rows: 30px 30px auto;
  grid-template-areas: 
    "sesso altezza"
    "peso eta"
    "descrizione descrizione";
  font-size: 10px;
}

.sesso {
  grid-area: sesso;
  width: 120px;
}

.altezza {
  grid-area: altezza;
  width: 120px;
}

.peso {
  grid-area: peso;
  width: 120px;
}

.eta {
  grid-area: eta;
  width: 120px;
}

div.descrizione {
  grid-area: descrizione;
  padding-bottom: 20px;
}

div.aspetto textarea{
  margin: 0px !important;
}

/*----------PERSONALITY SECTION-------------*/

.sheet-personality {
  grid-area: personality;
  overflow-y: auto;
  overflow-x: hidden;
  height: min-content;
  font-size: 10px;
}

.personalita {
  margin-left: 20px;
  padding-bottom: 20px;
}

.personalita label{
  margin-bottom: 0px;
}

/*----------FINANCE SECTION-------------*/

.sheet-finance {
  grid-area: finance;
  overflow-y: auto;
  overflow-x: hidden;
  height: min-content;
}

.finanze {
  display: grid;
  grid-template-columns: 60px 130px 60px;
  grid-template-rows: 45px 30px 30px;
  grid-template-areas: 
    "crediti label-1 ."
    ". label-2 oneri"
    ". label-3 rendita";
  font-size: 10px;
  margin-left: 20px;
  margin-right: 20px;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  padding-bottom: 20px;
}

input.crediti {
  grid-area: crediti;
  max-height: 35px;
  align-self: center;
  width: 60px !important;
}

label.crediti {
  grid-area: label-1;
  margin-bottom: 0px;
  font-size: 16px;
  align-self: center;
}

input.oneri {
  grid-area: oneri;
  margin-top: 0px;
  max-height: 30px;
  width: 60px !important;
}

label.oneri {
  grid-area: label-2;
  margin-bottom: 0px;
  justify-self: flex-end;
  align-self: center;
}

input.rendita {
  grid-area: rendita;
  margin-top: 0px;
  max-height: 30px;
  width: 60px !important;
}

label.rendita {
  grid-area: label-3;
  margin-bottom: 0px;
  justify-self: flex-end;
  align-self: center;
}

/*---------- NPC SHEET ----------*/

.npc {
  display: grid;
  justify-self: center;
  grid-gap: 4px;
  grid-template-columns: 300px 300px 300px;
  grid-template-rows: min-content min-content auto;
  grid-template-areas: 
    "stats tratti azioni"
    "stats poteri reazioni";
}

.npc .npc_stats{
  padding: 20px;
  padding-bottom: unset;
  grid-area: stats;
  display: grid;
  grid-row-gap: 4px;
  grid-column-gap: 4px;
  grid-template-areas: 
    "titolo titolo titolo titolo"
    "nome nome nome nome"
    "tipo taglia taglia natura"
    "livellolabel livelloinput minaccialabel minacciainput"
    "pvlabel pvinput velocitalabel velocitainput"
    "difesalabel difesainput armaturalabel armaturainput"
    "stats stats stats stats";
  grid-template-columns: 70px 45px 70px 65px;
  grid-template-rows: min-content min-content min-content min-content min-content min-content auto;
}

.npc label.stats {
  grid-area: titolo;
}

button[type="roll"].skill.btn.ui-draggable{
  background-size: 16px 16px;
  background-repeat: no-repeat;
  border: 1px;
  border-style: solid;
  height: 10px;
  width: 10px;
}

button[type="roll"].skill.btn.ui-draggable::before{
  content: "";
  border: 0px;
  height: 15px;
  width: 15px;
}

.npc label {
  justify-self: center;
  align-self: center;
  margin: unset;
}

.npc label.titolosezione {
  text-align: center;
  margin: 10px !important;
}

.npc input {
  width: auto !important;
  max-height: 20px;
  align-self: center;
  margin:unset;
}

.npc input.sheet-toggle-show {
  width: 15px !important;
} 

.npc select {
  width: auto;
  max-height: 20px;
  margin-bottom: auto;
  padding: 0px;
}

.npc input.nome {
  grid-area: nome;
  width: auto;
}

.npc .tipocreatura{
  grid-area: tipo;
}

.npc .taglia {
  grid-area: taglia;
}

.npc .natura {
  grid-area: natura;
}

.npc label.livello {
  grid-area: livellolabel;
}

.npc input.livello {
  grid-area: livelloinput;
}

.npc label.minaccia {
  grid-area: minaccialabel;
}

.npc select.minaccia {
  grid-area: minacciainput;
}

.npc label.puntivitalita {
  grid-area: pvlabel;
  grid-area: pvlabel;
  position: unset;
  margin: unset;
  text-align: center;
}

.npc input.puntivitalita {
  grid-area: pvinput;
  margin: unset;
}

.npc label.velocita {
  grid-area: velocitalabel;
}

.npc input.velocita {
  grid-area: velocitainput;
}

.npc label.difesa {
  grid-area: difesalabel;
}

.npc input.difesa {
  grid-area: difesainput;
}

.npc label.armatura {
  grid-area: armaturalabel;
}

.npc input.armatura {
  grid-area: armaturainput;
}

.npc .npc_abilita {
  grid-area: stats;
  padding: 20px;
  padding-bottom: unset;
  display: grid;
  grid-template-areas: 
    "cmblabel roblabel deslabel perlabel intlabel vollabel teclabel"
    "cmbinput robinput desinput perinput intinput volinput tecinput"
    "qualifiche qualifiche qualifiche qualifiche qualifiche qualifiche qualifiche";
  grid-template-columns: repeat(7, 37px);
  grid-template-rows: min-content min-content auto;
  justify-self: center;
}

.npc .npc_abilita label{
  padding: unset;
}

.npc .npc_abilita input{
  width: 30px !important;
  justify-self: center;
}

.npc button[type="roll"].button-text.btn.ui-draggable{
  background:none;
  border:none;
  margin:0;
  padding:0;
  cursor: pointer;
  color: var(--dark-secondarytext);
  font-size: 15px;
}

.npc button[type="roll"].button-text.btn.ui-draggable::before{
  content: "";
}

.npc button.cmb{
  grid-area: cmblabel;
}

.npc input.cmb{
  grid-area: cmbinput;
}

.npc button.rob{
  grid-area: roblabel;
}

.npc input.rob{
  grid-area: robinput;
}

.npc button.des{
  grid-area: deslabel;
}

.npc input.des{
  grid-area: desinput;
}

.npc button.per{
  grid-area: perlabel;
}

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

.npc button.int{
  grid-area: intlabel;
}

.npc input.int{
  grid-area: intinput;
}

.npc button.vol{
  grid-area: vollabel;
}

.npc input.vol{
  grid-area: volinput;
}

.npc button.tec{
  grid-area: teclabel;
}

.npc input.tec{
  grid-area: tecinput;
}

.npc .npc_abilita div.qualifiche{
  grid-area: qualifiche;
  justify-self: center;
}

.npc input.qualifica {
  width: 140px !important;
  justify-self: unset;
}

.npc .npc_tratti {
  grid-area: tratti;
  padding-top: 20px;
}

.npc .npc_azioni {
  grid-area: azioni;
  padding-top: 20px;
}

.npc .npc_poteri {
  grid-area: poteri;
}

.npc .npc_reazioni {
  grid-area: reazioni;
}