.sheet-main {
    display: grid;
    min-width: 900px;
    min-height: 1300px;
    grid-gap: 4px;
    grid-template-columns: 300px 300px 300px ;
    grid-template-rows: auto minmax(310px,auto) minmax(50px,auto) auto;
    grid-template-areas:
        "common common header"
        "skill health stats"
        "skill attack traits"
        "skill inv power";
  }
  
  /*----------------- GENERAL CSS ------------------*/
  
  textarea {
    width: 90%;
    height: 85%;
  }
  
  .sheet-section {
      padding: 5px;
      border-style: solid;
  }


  .repcontainer{
    margin-top: 0px;
    background-image:url("https://raw.githubusercontent.com/vincenzov01/roll20-character-sheets/Farsight-RPG-Community-Edition/Farsight%20RPG%20Community%20Edition/images/section%20center.png");
    background-size: contain;
    background-repeat: repeat-y;
  }

  .repcontrol{
    background-image: url("https://raw.githubusercontent.com/vincenzov01/roll20-character-sheets/Farsight-RPG-Community-Edition/Farsight%20RPG%20Community%20Edition/images/section%20bottom.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 300px;
    height: 65px;
    margin-top: -10px;
  }
  
  .repitem{
    grid-area: repeat-condizioni;
    align-items: center;
    display: grid;
    grid-template-rows: auto;
    grid-template-areas:"titolo"
                        "toggle"
                        "descrizione";
    margin-bottom: 10px;
  }

  div.titolo{
    grid-area: titolo;
    width: auto;
    height: auto;
    background-color: transparent;
    margin-left: 10px;
    margin-right: 10px;
  }

  .descrizione{
    background-color: transparent;
    margin-left: 10px;
  }

  textarea.descrizione{
    grid-area: descrizione;
    width: auto;
    height: auto;
    background-color: transparent;
    margin-left: 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;
  }

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

  input[type="text"] {
    /*background-color: transparent;*/
    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{
    background-image: url("https://raw.githubusercontent.com/vincenzov01/roll20-character-sheets/Farsight-RPG-Community-Edition/Farsight%20RPG%20Community%20Edition/images/hexagon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    margin-top: 10px;
    position:absolute;
    overflow:hidden;
    z-index:0;
    height: 50px;
    text-align: center;
  }

  input[type="number"].esagonosmall{
    background-image: url("https://raw.githubusercontent.com/vincenzov01/roll20-character-sheets/Farsight-RPG-Community-Edition/Farsight%20RPG%20Community%20Edition/images/hexagon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    margin-top: 10px;
    position:absolute;
    overflow:hidden;
    z-index:0;
    height: 35px;
    width: 30px !important;
    text-align: center;
  }

  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:50px;
      margin-left:15px;
      text-align: center;
  }

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

  textarea {
    /*background-color: transparent;*/
    width: 89%;
    height: 70%;
    margin-right: 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 {
    -moz-appearance: textfield;
  }

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

  .sheet-shortbio {
    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: 290px;
  }

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

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

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

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

  /*--------SKILL SECTION---------*/
  .sheet-skill {
    grid-area: skill;
    background-image: url("https://raw.githubusercontent.com/vincenzov01/roll20-character-sheets/Farsight-RPG-Community-Edition/Farsight%20RPG%20Community%20Edition/images/skill%20no%20esagoni.png");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .sheet-main-skill{
    margin-top: 25px;
    align-items: center;
    display: grid;
    grid-template-columns: 70px 130px 30px 30px 30px;
    grid-template-rows: 25px;
    grid-template-areas:"input label button . .";
  }

  .sheet-sub-skill{
    display: grid;
    align-items: center;
    grid-template-columns: 70px 130px 30px 30px 30px;
    grid-template-rows: 16px;
    grid-template-areas:". label button input .";
  }

  input[class="main-skill"]{
    grid-area: input;
    margin-top: 10px;
  }

  label[class="main-skill"]{
    grid-area: label;
    margin-bottom:0px;
  }

  button[type="roll"].main-skill.btn.ui-draggable::before{
    content: "";
    border: 0px;
    grid-area: button;
    height: 15px;
    width: 15px;
  }
  button[type="roll"].main-skill.btn.ui-draggable{
    background-size: 20px 20px;
    background-repeat: no-repeat;
    border: 1px;
    border-style: solid;
    grid-area: button;
    height: 15px;
    width: 15px;
  }

  input[class="sub-skill"]{
    grid-area: input;
    background-image: url("https://raw.githubusercontent.com/vincenzov01/roll20-character-sheets/Farsight-RPG-Community-Edition/Farsight%20RPG%20Community%20Edition/images/grade.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: center;
    height: 16px;
  }
  
  label[class="sub-skill"]{
    grid-area: label;
    font-size: 10px;
    margin-bottom:0px;
  }
  
  button[type="roll"].sub-skill.btn.ui-draggable::before{
    content: "";
    border: 0px;
    grid-area: button;
    height: 10px;
    width: 10px;
  }

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

  /*---------HEALTH SECTION-----------*/
  .sheet-health {
    background-image: url("https://raw.githubusercontent.com/vincenzov01/roll20-character-sheets/Farsight-RPG-Community-Edition/Farsight%20RPG%20Community%20Edition/images/health%20top.png");
    background-repeat: no-repeat;
    background-size: contain;
    grid-area: health;
  }

  input[type="number"].puntivitalità{
    margin-left: 44px;
    margin-top: 50px;
  }

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

  input[type="number"].puntivitalitàmax{
    margin-left: 20px;
    margin-top: 10px;
  }

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

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

  .salvezzamorte{
    margin-top: 50px;
    display: grid;
    grid-template-columns: 150px 75px 75px;
    grid-template-rows: 20px 16px 16px;
    grid-template-areas:". salvezzamorte salvezzamorte"
                        ". labelsuccesso checkboxsuccesso"
                        ". labelfallimento checkboxfallimento";

  }

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

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

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

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

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

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

  }

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

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

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

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

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

  .sheet-stats {
    background-image: url("https://raw.githubusercontent.com/vincenzov01/roll20-character-sheets/Farsight-RPG-Community-Edition/Farsight%20RPG%20Community%20Edition/images/stats.png");
    background-repeat: no-repeat;
    background-size: 300px 300px;
    grid-area: stats;
  }

  .stats{
    margin-top: 10px;
    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;
  }

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

  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;
    margin-left: 240px;
    align-items: center;
  }

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

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

  .sheet-attack {
    grid-area: attack;
    background-image: url("https://raw.githubusercontent.com/vincenzov01/roll20-character-sheets/Farsight-RPG-Community-Edition/Farsight%20RPG%20Community%20Edition/images/attack%20top.png");
    background-repeat: no-repeat;
    background-size: contain;
    min-height: auto;
    padding-top: 18px;
  }

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

  }

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

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

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

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

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

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

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

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

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

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


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

  .sheet-inv {
    grid-area: inv;
    padding-top: 14px;
    background-image: url("https://raw.githubusercontent.com/vincenzov01/roll20-character-sheets/Farsight-RPG-Community-Edition/Farsight%20RPG%20Community%20Edition/images/inventory%20top.png");
    background-repeat: no-repeat;
    background-size: contain;
  }


  /*----------TRAITS SECTION-------------*/
  
  .sheet-traits {
    grid-area: traits;
    padding-top: 18px;
    background-image: url("https://raw.githubusercontent.com/vincenzov01/roll20-character-sheets/Farsight-RPG-Community-Edition/Farsight%20RPG%20Community%20Edition/images/traits%20top.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
  

  /*-----------POWER SECTION-----------*/
  .sheet-power {
    grid-area: power;
    background-image: url("https://raw.githubusercontent.com/vincenzov01/roll20-character-sheets/Farsight-RPG-Community-Edition/Farsight%20RPG%20Community%20Edition/images/power%20top.png");
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 18px;
  }

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

  label[class="puntipsi"]{
    grid-area: label;
    margin-top: 25px;
    margin-left: 120px;
    margin-bottom: 0px;
  }

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

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

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

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

  input[type="number"].puntipsi{
    margin-left: 210px;
    margin-top: 50px;
  }

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

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

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

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

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