/*
https://github.com/dtsm12

Heavy use of grid-area
Could do with more efficient class definition

*/

@import url('https://fonts.googleapis.com/css?family=Blinker|Bangers');

/* ---------------- expandable textareas --------------------*/

input.sheet-textarea-expand[value="0"] ~  .sheet-textarea-collapsed,
input.sheet-textarea-expand[value="on"] ~  .sheet-textarea-expanded  {
    display: inline;
}

input.sheet-textarea-expand[value="0"] ~  .sheet-textarea-expanded,
input.sheet-textarea-expand[value="on"] ~  .sheet-textarea-collapsed {
    display: none;
}

.sheet-expand-colum-header {
    width: 15px;
    font-size: 20px !important;
    line-height: 17px;
}

/* ---------------- ability conditional sections ------------*/

.sheet-has-faith,
.sheet-has-reflex,
.sheet-has-collar,
input.sheet-has-collar-check[value="1"] ~ .sheet-starving .sheet-hunger-desc-left,
input.sheet-has-collar-check[value="1"] ~ .sheet-emaciated .sheet-hunger-desc-left,
.sheet-has-luck-stars,
.sheet-has-instinctive,
.sheet-has-moving-target,
.sheet-has-giant-genetics,
.sheet-tightening-the-belt,
button.sheet-defense-roll,
button.sheet-luck-reroll {
    display: none;
}

input.sheet-has-faith-check[value="1"] ~ .sheet-has-faith,
input.sheet-has-reflex-check[value="1"] ~ .sheet-has-reflex,
input.sheet-has-collar-check[value="1"] ~ .sheet-has-collar,
input.sheet-has-luck-stars-check[value="1"] ~ .sheet-has-luck-stars,
input.sheet-has-instinctive-check[value="1"] ~ .sheet-has-instinctive,
input.sheet-has-moving-target-check[value="1"] ~ .sheet-has-moving-target,
input.sheet-has-giant-genetics-check[value="1"] ~ .sheet-has-giant-genetics,
input.sheet-tightening-the-belt-check[value="1"] ~ .sheet-tightening-the-belt,
input.sheet-attack-defense-check[value="1"] ~ button.sheet-defense-roll,
input.sheet-api-use-check[value^="!"] ~ button.sheet-luck-reroll {
    display: inline;
}
.sheet-notallowed-optional {
    cursor: not-allowed;
}

input.sheet-readonly-optional {    
    background-color: #f5f5f5;
    pointer-events: none;
}

input.sheet-disable-calc[value^="build"] ~ input.sheet-readonly-optional {    
    background-color: #FFFFFF;
    pointer-events: auto;
}

/* ---------------- experience section --------------*/
.sheet-experience-banner { 
    grid-area: experience-banner; 
    font-family: 'Bangers'; 
    font-size: 16px; 
    justify-self: center;
    
}

/* ---------------- encum section --------------*/

.sheet-encum {
    background: #FFFFFF; 
    border: 2px solid #000000;
}

.sheet-encum.sheet-subheading {
    font-size: 12px;
}

.sheet-encum.sheet-exceeded { 
    grid-area: encum-exceeded; 
    padding: 5px;
    z-index: -1;
}

/* ---------------- build-repair section --------------*/

.sheet-build-repair .sheet-desc {
    background: #FFFFFF;
    padding: 3px;
    align-self: baseline;
}

.sheet-build-repair .sheet-crafting,
.sheet-build-repair .sheet-mechanics,
.sheet-build-repair .sheet-science,
.sheet-build-repair .sheet-medicine
{
    border: 2px solid #000000;
}

.sheet-build-repair .sheet-head.sheet-desc { 
    grid-area: head-desc; 
    background: #000000 !important;
    align-self: baseline;
}

.sheet-build-repair .sheet-head.sheet-build-threshold { 
    grid-area: head-thresh; 
    width: 55px !important;
    justify-self: center;
    z-index: 1;
}

/* ---------------- hunger section --------------*/

.sheet-hunger-desc-left {
    justify-self: right;
}

.sheet-hunger-desc-right {
    justify-self: left;
    padding-left: 2px;
}
.sheet-hunger-input {
    height: 45px !important;
    width: 45px !important;
    align-self: center;
    justify-self: center;
    font-size: 24px;
}

.sheet-starving,
.sheet-emaciated,
.sheet-dead {
    color: white;
}

input.sheet-starving-check[value="on"] ~ .sheet-starving,
input.sheet-emaciated-check[value="on"] ~ .sheet-emaciated,
input.sheet-dead-check[value="on"] ~ .sheet-dead {
    color: red;
}

/* ---------------- infection section --------------*/

.sheet-infection-table { 
    grid-area: infection-table; 
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "infection-banner infection-banner infection-banner"
                         "infection-col-head-1 infection-col-head-2 infection-col-head-3"
                         "incubation-no incubation-desc incubation-status"
                         "gestation-no gestation-desc gestation-status"
                         "symptomatic-no symptomatic-desc symptomatic-status"
                         "prodromal-no prodromal-desc prodromal-status"
                         "acute-no acute-desc acute-status"
                         "transformdie-no transformdie-desc transformdie-status";
    align-self: flex-start;
    border-bottom: 2px solid #000000;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    text-align: center;
    margin-bottom: 6px;
}

.sheet-infection-no,
.sheet-infection-status {
    border-top: 2px solid #000000;
    padding-left: 2px;
    padding-right: 2px;
}

.sheet-infection-desc {
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    padding-left: 4px;
    padding-right: 4px;
}

.sheet-infection-banner {
    text-align: left !important;
    padding-left: 16px;
}

/* ---------------- resolve section --------------*/

.sheet-resolve-banner { 
    grid-area: resolve-banner; 
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "resolve-banner-text resolve-banner-status"
}

.sheet-resolve-banner-status {
    grid-area: resolve-banner-status;
    text-align: center;
    background-color: #000000;
    line-height: 22px;
}

.sheet-resolve-table { 
    grid-area: resolve-table; 
    display: grid;
    grid-template-columns: 1fr 17.5px;
    grid-template-rows: auto;
    grid-template-areas: "resolve-banner-text resolve-banner-status"
                         "unnerved-desc unnerved-status"
                         "shaken-desc shaken-status"
                         "insanity-desc insanity-status";
    align-self: flex-start;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    margin-bottom: 6px;
} 

.sheet-insanity-desc {
    vertical-align: -webkit-baseline-middle;
}

.sheet-resolve-row {
    display: grid;
    grid-template-columns: 128px 1fr;
    grid-template-rows: auto;
    border-top: 2px solid #000000;
}

.sheet-resolve-baner-status,
.sheet-resolve-status {
    border-top: 2px solid #000000;
    padding: 2px;
    line-height: 22px;
}

.sheet-resolve-desc {
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
    align-self: center;
    line-height: 14px;
    height: 28px;
    padding-left: 3px;
}

/* ---------------- cp section --------------*/

input[type=number].sheet-cp-input {
    width: 100%;
    height: 100%;
    font-size: 24px;
}

.sheet-cp-box {
    border: 4px solid #000000;
    height: 50px;
}

.sheet-cp-label {
    font-family: 'Blinker'; 
    font-size: 10px; 
    font-weight: bold;
    position: relative;
    top: -15px;
    height: 0px;
    align-self: center;
}

.sheet-cp-costs {
    font-family: 'Blinker'; 
    font-size: 12px; 
    font-weight: bold;
    border-bottom: 3px solid #000000;
    text-align: center;
    padding: 0px !important;
}

/* ---------------- special abilities section --------------*/

.sheet-abilities-table { 
    grid-area: abilities-table; 
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 30px auto;
    grid-template-areas: "abilities-head"
                         "abilities-row";
} 

.sheet-abilities-head {
    grid-area: abilities-head; 
    display: flex;
    background: #000000;
    height: 100%;
}

.sheet-abilities-head .sheet-table-head {
    background: #FFFFFF;
    color: #000000;
    height: 100%;
    font-size: 13px;
    font-weight: bold;
}

.sheet-ability-head-text {
    vertical-align: sub;
}

.repitem .sheet-ability-source {
    margin-left: 3px;
}

.sheet-ability-source,
input[type=text].sheet-ability-source {
    width: 12%;
    font-size: 13px;
}

.sheet-ability-name,
input[type=text].sheet-ability-name {
    width: 24%;
    font-size: 13px;
}

.sheet-ability-effect,
textarea.sheet-ability-effect {
    vertical-align: top;
    overflow: hidden;
    width: 56%;
    min-width: 56%;
    max-width: 56%;
    min-height: 17px;
    font-size: 13px;
    font-family: 'Blinker';
    height: auto;
}

/* ---------------- gear section --------------*/

.sheet-gear-table { 
    grid-area: gear-table; 
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "gear-head"
                         "gear-row";
} 

.sheet-gear-head {
    grid-area: gear-head; 
    display: flex;
    background: #000000;
}

.sheet-gear-item,
input[type=text].sheet-gear-item {
    width: 20%;
    font-size: 13px;
}

.sheet-gear-characteristic, 
textarea.sheet-gear-characteristic, 
input[type=text].sheet-gear-characteristic {
    vertical-align: top;
    overflow: hidden;
    width: 70%;
    min-width: 70%;
    max-width: 70%;
    min-height: 17px;
    font-size: 13px;
    font-family: 'Blinker';
}

.sheet-gear-cp,
input[type=number].sheet-gear-cp {
    width: 4%;
    font-size: 13px;
    font-family: 'Blinker';
    margin-left: auto;
}

/* ---------------- attack section --------------*/

.sheet-attack-table { 
    grid-area: attack-table; 
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "attack-head"
                         "attack-row-brawl"
                         "attack-row";
} 

.sheet-attack-head {
    grid-area: attack-head; 
    display: flex;
    background-color: #000000;
}

input.sheet-attack-cell,
select.sheet-attack-cell,
.sheet-attack-cell {
    font-family: 'Blinker';
    font-size: 14px !important;
    font-weight: bold;
}

.sheet-attack-head .sheet-table-head {
    padding-right: 2px;
    align-self: center;
}

.sheet-attack-weapon,
input[type=text].sheet-attack-weapon {
    width: 14%;
}

.sheet-attack-skill,
select.sheet-attack-skill,
input[type=text].sheet-attack-skill {
    width: 14%;
}

.sheet-attack-skill.sheet-brawl {
    padding-left: 8px;
}

.sheet-attack-dc,
select.sheet-attack-dc {
    width: 7%;
    padding-top: 2px;
}

.sheet-attack-cp,
input[type=number].sheet-attack-cp,
input[type=text].sheet-attack-cp {
    width: 4%;
    text-align: center;
}

.sheet-attack-threshold,
input[type=number].sheet-attack-threshold {
    width: 6%;
}

.sheet-attack-threshold-h,
.sheet-attack-threshold-q,
input[type=number].sheet-attack-threshold-h,
input[type=number].sheet-attack-threshold-q {
    width: 4%;
}

.sheet-attack-ammo,
input[type=number].sheet-attack-ammo,
input[type=text].sheet-attack-ammo {
    width: 4%;
    text-align: center;
}

.sheet-attack-traits,
input[type=text].sheet-attack-traits {
    width: 19%;
}

.sheet-table-head.sheet-attack-roll, 
.sheet-table-head.sheet-parry-roll, 
.sheet-table-head.sheet-riposte-roll {
    padding-left: 12px;
}

.sheet-attack-roll,
.sheet-parry-roll,
.sheet-riposte-roll {
    width: 5%;
}

/* ---------------- defense section --------------*/

.sheet-defense-button {
    line-height: 10px;
    width: 100%;
}

.sheet-dodge-row { 
    grid-area: dodge-row;
    grid-template-areas: "dodge-desc dodge-threshold dodge-threshold-h dodge-threshold-q"
}
/*
.sheet-dodge-threshold {
    grid-area: dodge-threshold;
}

.sheet-dodge-threshold-h {
    grid-area: dodge-threshold-h;
}

.sheet-dodge-threshold-q {
    grid-area: dodge-threshold-q;
}
*/
.sheet-full-dodge-row { 
    grid-area: full-dodge-row; 
    grid-template-areas: "full-dodge-desc full-dodge-threshold full-dodge-threshold-h full-dodge-threshold-q"
}

.sheet-full-dodge-threshold {
    grid-area: full-dodge-threshold;
}

.sheet-full-dodge-threshold-h {
    grid-area: full-dodge-threshold-h;
}

.sheet-full-dodge-threshold-q {
    grid-area: full-dodge-threshold-q;
}

.sheet-parry-row { 
    grid-area: parry-row; 
    /*grid-template-areas: "parry-desc parry-threshold parry-threshold-h parry-threshold-q"*/
    grid-template-areas: "parry-desc parry-message parry-message parry-message"
}

.sheet-parry-desc { grid-area: parry-desc; }
.sheet-parry-message { grid-area: parry-message; }

.sheet-riposte-row { 
    grid-area: riposte-row; 
    /*grid-template-areas: "riposte-desc riposte-threshold riposte-threshold-h riposte-threshold-q"*/
    grid-template-areas: "riposte-desc riposte-message riposte-message riposte-message"
}

.sheet-riposte-desc { grid-area: riposte-desc; }
.sheet-riposte-message { grid-area: riposte-message; }

.sheet-defense-message {
    font-family: 'Blinker'; 
    font-size: 14px; 
    text-align: center;
    text-transform: uppercase;
    justify-self: center;
    color: #FFFFFF;
    font-weight: normal !important;
    line-height: 14px;
    align-self: center;
}

.sheet-defense-footing {
    font-size: 10px; 
}

.sheet-defense-row {
    display: grid;
    grid-template-columns: 50% 17% 17% 16%;
    height: 35px;
}

input[type=number].sheet-defense-threshold,
input[type=number].sheet-defense-threshold-h,
input[type=number].sheet-defense-threshold-q {
    width: 100%;
}

input[type=number].sheet-fill {
    width: 100%;
}

.sheet-defense-head {
    grid-area: defense-head; 
    display: grid;
    grid-template-columns: 49% 18% 17% 16%;
    grid-template-rows: auto;
    grid-template-areas: "defense-col-head-1 defense-col-head-2 defense-col-head-3 defense-col-head-4"
}

.sheet-defense-desc {
    line-height: 14px;
    height: 27px;
    background: #000000;
    width: 80%;
}


.sheet-defense-table {
  grid-area: defense-table;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "defense-head"
                         "dodge-row"
                         "full-dodge-row"
                         "parry-row"
                         "riposte-row";
    border-bottom: 3px solid black;
}

/* ---------------- special stats section --------------*/

.sheet-armor-shield { 
    grid-area: armor-shield; 
    display: grid;
    position: relative;
    top: -5px;
    grid-template-columns: 80px;
    grid-template-rows: 18px 30px 0px 42px 0px 15px;
    grid-template-areas: "shield-label"
                         "shield-input-max"
                         "shield-input-max-label"
                         "shield-input-current"
                         "shield-input-current-label";
}

.sheet-armor-cell {
    border: 3px solid #000000;
}

.sheet-shield-label {
    font-family: 'Blinker'; 
    font-size: 10px; 
    font-weight: bold;
    position: relative;
}

.sheet-shield-input-max { 
    grid-area: shield-input-max;  
    justify-self: center; 
    align-self: end;
}

input[type=number].sheet-shield { 
    border: 1px solid #000000; 
    font-family: Bangers; 
    font-size: 16px; 
    text-align: center;
    border-bottom-color: transparent !important;
    width: 60px;
}

input[type=number].sheet-shield-current { 
    border-top-color: transparent !important; 
    height: 42px;
}

.sheet-shield-input-current-label:after {
    content: '';
    z-index: -1;
    display: block;
    position: absolute;
    top: -14px;
    right: -5px;
    width: 41px;
    height: 40px; 
    background: #FFFFFF;
    border-right:1px solid #000000;
    border-bottom:1px solid #000000;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}

.sheet-armor-table { 
    grid-area: armor-table; 
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 22.5px 1fr;
    grid-template-areas: "armor-head"
                         "armor-row";
    align-self: flex-start
    margin-right: 5px;
}  

.sheet-armor-head {
    grid-area: armor-head; 
    display: grid;
    grid-template-columns: 103px 33px 32px;
    grid-template-rows: auto;
    grid-template-areas: "armor-col-head-1 armor-col-head-2 armor-col-head-3"
}

.sheet-armor-row { 
    grid-area: armor-row; 
    width: fit-content;
}

input[type=text].sheet-armor-name {
    width: 100px !important;
}

input[type=number].sheet-armor-ap {
    width: 30px !important;
}

input[type=number].sheet-armor-cp {
    width: 30px !important;
}


.sheet-build { 
    display: grid;
    grid-area: build;  
    grid-template-columns: 45px 45px;
    grid-template-rows: 32px 40px 30px 40px;
    grid-template-areas: "build-labels build-labels"
                         "build-input dc-input"
                         ". dc-input-label"
                         "food-req-label food-req";
}   

.sheet-food {
    font-size: 10px;
    font-weight: bold;
    font-family: 'Blinker';
    text-transform: uppercase;
    line-height: 11px;
}

.sheet-food-req-label {
    grid-area: food-req-label;
    padding-right: 5px;
    align-self: center;
    text-align: end;
}

.sheet-food-req {
    grid-area: food-req;
    display: flex;
    align-items: center;
}

input[type=number].sheet-food-req {
    width: 24px !important;
    height: 30px !important;
    border: 1px solid #000000;
    font-family: Bangers;
    font-size: 12px;
    text-align: center;
    margin-right: 5px;
    margin-left: 2px;
}

.sheet-build-labels {
    grid-area: build-labels;
    align-self: end;
}

.sheet-dc-input {
    grid-area: dc-input;
    justify-self: start;
} 

.sheet-dc-input-label {
    grid-area: dc-input-label;
    font-family: 'Blinker';
    font-size: 10px;
    font-weight: bold;
    position: relative;
    text-align: center;
    left: -4px;
}

.sheet-build-input {
    grid-area: build-input;
    justify-self: end;
}

input[type=number].sheet-build-lozenge {
    text-align: center;
    height: 40px;
    width: 40px !important;
}

.sheet-build-lozenge {
    border-style: solid;
    border-color: #000000;    
    border-width: 3px 1px 3px 3px;
    font-family: Bangers;
    font-size: 16px;
    border-top-left-radius: 10px;
    -moz-border-top-left-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-bottom-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
}

input[type=number].sheet-dc-lozenge {
    text-align: center;
    height: 40px;
    width: 32px !important;
}

.sheet-dc-lozenge {
    border-style: solid;
    border-color: #000000;    
    border-width: 3px 3px 3px 0px;  
    font-family: Bangers;
    font-size: 16px;
    border-top-right-radius: 10px;
    -moz-border-top-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
}

.sheet-health-labels { 
    grid-area: health-labels; 
    position: relative;
    top: 17px;
} 

.sheet-health-lozenge {
    text-align:center;
    border: 3px solid black;    
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    font-family: Bangers;
    font-size: 16px;
}

.sheet-health-max {
    grid-area: health-max;
    align-self: center;
    justify-self: right;
}

input[type=number].sheet-health-lozenge {
    height: 80px;
    width: 36px !important;
}

.sheet-health-current {
    align-self: center;
}

.sheet-health-current-label { 
    grid-area: health-current-label; 
    top: -8px;
} 

input[type=number].sheet-health-current {
        width: 120px !important; 
        height: 70px !important; 
        border: 1px solid #000000;
        border-right: 5px solid #000000; 
        border-bottom: 4px solid #000000;  
}

.sheet-health { 
    display: grid;
    grid-area: health; 
    grid-template-columns: 32px 120px;
    grid-template-rows: 40px 60px 4px;
    grid-template-areas: ". health-labels"
                         "health-max health-current"
                         "health-max-label health-current-label";
    position: relative;
    top: -15px;
} 

.sheet-init { 
    grid-area: init; 
    justify-self: end;
    align-self: end;
}


.sheet-init-temp-label { 
    width: 75px;
    text-align: end;
}

.sheet-init-temp { 
    grid-area: init-temp; 
    justify-self: center;
} 

.sheet-init-next {
    grid-area: init-next;
    justify-self: center;
    margin: 5px;
}

.sheet-init- {
    align-self: center;
}

.sheet-init-15 {
    border-right: 24px solid #000000;
}  

.sheet-init-lozenge {
    text-align:center;
    border: 3px solid black;    
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    font-family: Bangers;
    font-size: 16px;
}

input[type=number].sheet-init-lozenge {
    height: 45px;
    width: 35px !important;
}


input[type=number].sheet-init- {
        width: 24px !important; 
        height: 30px !important; 
        border: 1px solid #000000; 
        font-family: Bangers; 
        font-size: 12px; 
        text-align: center;
}

.sheet-initiative { 
    display: grid;
    grid-area: initiative; 
    grid-template-columns: 32px 24px 24px 24px;
    grid-template-rows: 38px 35px 10px 32px;
    grid-template-areas: "init-labels init-labels init-labels init-labels"
                         "init init-5 init-10 init-15"
                         "init init-5-l init-10-l init-15-l"
                         "init-temp-label init-temp-label init-temp-label init-temp"
                         "init-next init-next init-next init-next";
    justify-self: end;
    margin-left: 10px;
} 

.sheet-save-salvage {
  grid-area: save-salvage;
  grid-template-areas: "salvage-labels salvage-labels"
                       "salvage-input salvage-input"
                       "salvage-h salvage-q"
                       "salvage-h-label salvage-q-label";
}

.sheet-save-resilience {
  grid-area: save-resilience;
  grid-template-areas: "resilience-labels resilience-labels"
                       "resilience-input resilience-input"
                       "resilience-h resilience-q"
                       "resilience-h-label resilience-q-label";
}


.sheet-save-resolve {
  grid-template-areas: "resolve-labels resolve-labels"
                       "resolve-input resolve-input"
                       "resolve-h resolve-q"
                       "resolve-h-label resolve-q-label";
}



.sheet-save-immunity {
  grid-area: save-immunity;
  grid-template-areas: "immunity-labels immunity-labels"
                       "immunity-input immunity-input"
                       "immunity-h immunity-q"
                       "immunity-h-label immunity-q-label";
}


.sheet-special-stat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 38px 30px 28px 32px;
  justify-items: center;
  align-items: end;
}

.sheet-saves {
    display: grid;
    grid-area: saves;
    grid-column-gap: 5px;
    grid-template-columns: 78px 78px 78px 78px;
    grid-template-rows: 16px 10px 1fr 1fr;
    grid-template-areas:"save-salvage save-resilience save-resolve save-immunity";
}

.sheet-sp-stats-banner { 
    grid-area: sp-stats-banner; 
    align-self: center;
}

.sheet-sp-stats-ltl { grid-area: sp-stats-ltl; border-bottom: 4px solid #000000;} 
.sheet-sp-stats-lbl { grid-area: sp-stats-lbl; border-top: 4px solid #000000;} 
.sheet-sp-stats-ltr { grid-area: sp-stats-ltr; border-bottom: 4px solid #000000;} 
.sheet-sp-stats-lbr { grid-area: sp-stats-lbr; border-top: 4px solid #000000;} 

/* ---------------- skills section --------------*/

.sheet-prof-desc {
    display: grid;
    border-top: 2px dashed #000000;
    grid-area: prof-desc;
    grid-column-gap: 5px;
    grid-template-columns: 28px 20px 73px 1fr;
    grid-template-rows: 20px 20px 20px 20px 20px;
    grid-template-areas:"prof-circle prof-code-not prof-desc-not prof-text"
                        "prof-circle prof-code-p prof-desc-p prof-text"
                        "prof-circle prof-code-s prof-desc-s prof-text"
                        "prof-circle prof-code-t prof-desc-t prof-text"
                        "prof-circle prof-code-m prof-desc-m prof-text";
}

.sheet-prof-desc .sheet-code {
    font-size: 18px;
}

.sheet-prof-text { 
    grid-area: prof-text; 
    font-size: 10px;
    font-weight: bold;
    font-family: 'Blinker';
    padding-left: 15px;
}


.sheet-prof-circle { 
    grid-area: prof-circle; 
    align-self: center;
}

.sheet-luck-label { 
    grid-area: luck-label; 
    background-color: #000000;
    text-align: center;
}

.sheet-luck-reroll {
    grid-area: luck-reroll;
}

button.sheet-luck-button { 
    font-size: 18px !important;
    width: 75%;
    margin-top: 4px !important;
}

.sheet-luck-triangle {
    grid-area: luck-triangle; 
    border-top: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 12px solid black;
    border-left: 10px solid black;
    height: 0;
    width: 0;
    position: relative;
    left: -5px;
    z-index: -1;
}

.sheet-luck-use-label { 
    grid-area: luck-use-label; 
    font-size: 10px;
    white-space:nowrap;
    font-weight: bold;
    font-family: 'Blinker';
    text-transform: uppercase;
    line-height: 11px;
    justify-self: center;
    align-self: center;
}

.sheet-luck-input {
    grid-area: luck-input; 
    justify-self: end;
    position: relative;
    left: 5px;
    top: 1px;
}

.sheet-luck-current { 
    grid-area: luck-current; 
    position: relative;
    left: -6px;
    top: 1px;
}

.sheet-luck-lower-label {
    font-family: 'Blinker'; 
    font-size: 10px; 
    font-weight: bold;
    position: relative;
    top: -4px;
}

.sheet-luck-base-label { grid-area: luck-base-label; justify-self: end; left: 4px;}
.sheet-luck-max-label { grid-area: luck-max-label; justify-self: center;  top: -9px;}
.sheet-luck-current-label { grid-area: luck-current-label; left: 4px;}

.sheet-roll-modifiers { 
    grid-area:  roll-mod; 
    justify-self: center;
    align-self: center;
}

.sheet-gm-modifiers { 
    grid-area:  gm-mod; 
    justify-self: center;
    align-self: center;
}

.sheet-lozenge {
    text-align:center;
    border: 1px solid black;    
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    font-family: Bangers;
    font-size: 16px;
    align-self: center;
    justify-self: center;
}

input.sheet-lozenge {
    height: 45px;
    width: 28px !important;
}

div.sheet-prof {
    z-index: +1;
}

input.sheet-prof,
select.sheet-prof {
    text-align:center;
    background-color: #fff;
    border: 1px solid black;    
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    min-width: 100%;
    max-width: 100%;
    font-family: Bangers;
}

/* This is to remove the arrow of select element in IE */
select.sheet-prof::-ms-expand {	display: none; }
select.sheet-prof{
    -webkit-appearance: none;
    appearance: none;
    text-align-last:center;
}

button.sheet-skill-label span {
    padding-left: 9px;
}

button.sheet-skill-label,
.sheet-skill-label {
    text-align: center;
    /*vertical-align: bottom;
    text-transform: uppercase;
    line-height:1.2;*/
    border-left: 4px solid #000000;
    border-right: 4px solid #000000;
    border-bottom: 1px solid #000000;
    position: relative;
    /*padding-right: 4px;
    padding-left: 8px;*/
    left: -20px;
    top: -5px;
    height:27.5px;
    width: 75px;
    font-family: 'Blinker';
    font-size: 14px !important;
    font-weight: bold;
    padding: 0px 2px 0px 2px !important;
    white-space: normal;
    line-height: 13px;
}

.sheet-top-skill {
    border-top: 2px solid #000000;
}

/* ---------------- stats section --------------*/
input[type=number].sheet-stat { 
        width: 50px !important; 
        border: 1px solid #000000; 
        font-family: 'Candal'; 
        font-size: 16px; 
        text-align: center;
}

button.sheet-stat-roll {
    width: 85px;
    font-size: 17px !important;
}

input.sheet-stat-temp {
    display: inline;
}


input.sheet-stat-temp-check[value="0"] ~ .sheet-stat-temp {
    display: none;
}


input[type=number].sheet-stat-half { width: 25px; border: 1px solid #000000; font-size: 10px; }
input[type=number].sheet-stat-quarter { width: 25px; border: 1px solid #000000; font-size: 10px; }

.sheet-half { 
    justify-self: end; 
    align-self: start; 
    font-family: 'Blinker'; 
    font-size: 10px;
}

.sheet-quarter { 
    justify-self: start; 
    align-self: start; 
    font-family: 'Blinker';
    font-size: 10px;
}

.sheet-stat {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  justify-items: center;
  align-self: end;
}

input[type=number].sheet-stat {
  border-left: 4px solid #000000;
  border-right: 4px solid #000000;
}

.sheet-stat-labels { justify-self: stretch; }

.sheet-str {
  grid-area: str;
  grid-template-areas: "str-labels str-labels str-labels str-labels"
                       ". str-input str-input str-temp"
                       "str-h str-h str-q str-q"
                       "str-h-label str-h-label str-q-label str-q-label";
}

.sheet-for {
  grid-area: for;
  grid-template-areas: "for-labels for-labels for-labels for-labels"
                       ". for-input for-input for-temp"
                       "for-h for-h for-q for-q"
                       "for-h-label for-h-label for-q-label for-q-label";
}

.sheet-for-temp { grid-area: for-temp; }

.sheet-agi {
  grid-area: agi;
  grid-template-areas: "agi-labels agi-labels agi-labels agi-labels"
                       ". agi-input agi-input agi-temp"
                       "agi-h agi-h agi-q agi-q"
                       "agi-h-label agi-h-label agi-q-label agi-q-label";
}

.sheet-agi-temp { grid-area: agi-temp; }

.sheet-int {
  grid-area: int;
  grid-template-areas: "int-labels int-labels int-labels int-labels"
                       ". int-input int-input int-temp"
                       "int-h int-h int-q int-q"
                       "int-h-label int-h-label int-q-label int-q-label";
}

.sheet-int-temp { grid-area: int-temp; }

.sheet-ins {
  grid-area: ins;
  grid-template-areas: "ins-labels ins-labels ins-labels ins-labels"
                       ". ins-input ins-input ins-temp"
                       "ins-h ins-h ins-q ins-q"
                       "ins-h-label ins-h-label ins-q-label ins-q-label";
}

.sheet-ins-temp { grid-area: ins-temp; }

.sheet-cha {
  grid-area: cha;
  grid-template-areas: "cha-labels cha-labels cha-labels cha-labels"
                       ". cha-input cha-input cha-temp"
                       "cha-h cha-h cha-q cha-q"
                       "cha-h-label cha-h-label cha-q-label cha-q-label";
}

.sheet-cha-temp { grid-area: cha-temp; }

.sheet-fs {
  grid-area: fs;
  grid-template-areas: "fs-labels fs-labels fs-labels fs-labels"
                       ". fs-input fs-input fs-temp"
                       "fs-h fs-h fs-q fs-q"
                       "fs-h-label fs-h-label fs-q-label fs-q-label";
}

.sheet-fs-temp { grid-area: fs-temp; }

.sheet-bs {
  grid-area: bs;
  grid-template-areas: "bs-labels bs-labels bs-labels bs-labels"
                       ". bs-input bs-input bs-temp"
                       "bs-h bs-h bs-q bs-q"
                       "bs-h-label bs-h-label bs-q-label bs-q-label";
}

.sheet-bs-temp { grid-area: bs-temp; }

/* ---------------- character section --------------*/
.sheet-character label {
    border-top-style: double;
    border-width: 4px;
}

.sheet-data-entry {
    align-self: flex-end;
}

.sheet-logo{  
    grid-area: logo; 
    align-self: center;
}

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

textarea {
  width: 90%;
  height: 85%;
}

/* START: remove arrow controls from Input[type=number] */

    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    
    /* Firefox */
    input[type=number] {
      -moz-appearance: textfield;
    }

/* END: remove arrow controls from Input[type=number] */

.itemcontrol {
    margin-left: -32px;
}

input[type=text] { 
    font-family: 'Blinker';
    font-size: 13px;
    font-weight: bold;
    width: 100%;
}

input[type=number] { 
    font-family: 'Candal';
    font-size: 16px;
    text-align: center;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
}

button[type=roll].sheet-blank-roll-button::before { 
    content: ''; 
    font-family: unset;
}

select {
  font-family: 'Bangers';
  width: 100%;
  align-self: end;
  font-size: 18px;
  margin-bottom: 0px;
}

.sheet-label,
label {
    font-family: 'Blinker';
    font-size: 12px;
    padding-right: 0px;
    margin-bottom: 0px;
}

.sheet-banner {
    font-family: 'Bangers';
    font-size: 16px;
    text-align: center;
    background-color: #000000; 
    color: #FFFFFF;
}

.sheet-code {
    font-family: 'Bangers';
    font-size: 14px;
    text-align: center;
}

.sheet-dark {
    background-color: #000000; 
    color: #FFFFFF;
}

.sheet-subheading {
    font-family: 'Blinker'; 
    font-size: 14px; 
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.sheet-footing {
    font-family: 'Blinker'; 
    font-size: 9px; 
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.sheet-section {
    padding: 5px;
    /*border-style: solid;*/
}

.sheet-flex-col {
  display: flex;
  flex-flow: col wrap;
  /*justify-content: flex-start;*/
}

.sheet-flex-center {
  align-items: center;
  justify-content: center;
}

.sheet-self-center {
  align-self: center;
  justify-self: center;
}

.sheet-table-head {
    font-family: 'Blinker'; 
    font-size: 10px; 
    background: #000000;
    color: #FFFFFF;
    text-align: center;
    text-transform: uppercase;
}
.sheet-table-head-small {
    font-family: 'Blinker'; 
    font-size: 8px; 
    background: #000000;
    color: #FFFFFF;
    text-align: center;
    text-transform: uppercase;
}

.sheet-table-row {
    background: #000000
}

.sheet-table-cell,
input[type=text].sheet-table-cell,
input[type=number].sheet-table-cell {
    align-self: center;
    border: 2px solid #000000;
}

/*------------- Top Section-specific CSS -------------*/

.sheet-main {
  display: grid;
  font-family: 'Bangers';
  grid-template-columns: 7fr 8fr 2fr 4fr;
  grid-template-rows: 150px;
  grid-template-areas:
        "character character character character character"
        "stats stats stats stats stats"
        "skills skills skills skills skills"
        "sp-stats sp-stats sp-stats sp-stats sp-stats"
        "attacks attacks attacks attacks attacks"
        "defense build-repair build-repair cp resolve-infection"
        "abilities abilities abilities cp resolve-infection"
        "abilities abilities abilities cp-costs encum"
        "gear gear gear gear hunger"
        "gear gear gear gear experience";
}

/* ------------------- SIMPLE GRID AREAS ---------------------*/

.sheet-character {
  grid-area: character;
  display: grid;
  justify-content: start;
  align-content: end;
  border: 4px solid #000000;
  grid-column-gap: 5px;
  grid-template-columns: 2fr 2fr 1fr 2fr 2fr;
  grid-template-rows: 5fr 1fr 5fr 1fr;
  grid-template-areas:"character-name-input character-name-input logo player-name-input player-name-input"
                      "character-name-label character-name-label logo player-name-label player-name-label"
                      "archetype-primary-input archetype-secondary-input logo apocalypse-input age-input"
                      "archetype-primary-label archetype-secondary-label logo apocalypse-label age-label";
                      
}

.sheet-stats-grid {
  grid-area: stats;
  display: grid;
  border-top: 4px solid #000000;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "str for agi int ins cha fs bs";
}

.sheet-skills {
  grid-area: skills;
  display: grid;
  grid-column-gap: 5px;
  grid-template-columns: 3% 8.5% 3% 8.5% 3% 8.5% 3% 8.5% 3% 8.5% 3% 8.5% 3% 8.5% 3% 8.5%;
  grid-template-rows: 32px 32px 32px 32px 32px 32px 32px 32px 32px;
  grid-template-areas: ". skill-banner skill-banner skill-banner skill-banner skill-banner skill-banner skill-banner skill-banner skill-banner skill-banner skill-banner skill-banner skill-banner skill-banner ."
                       "skill-str skill-str skill-for skill-for skill-agi skill-agi skill-int skill-int skill-ins skill-ins skill-cha skill-cha skill-fs skill-fs skill-bs skill-bs"
                       "athletics-prof athletics-label . . archery-prof archery-label academics-prof academics-label crafting-prof crafting-label animalken-prof animalken-label blades-prof blades-label firearms-prof firearms-label"
                       "prof-desc prof-desc prof-desc prof-desc lockpick-prof lockpick-label mechanics-prof mechanics-label drive-prof drive-label charm-prof charm-label brawl-prof brawl-label heavyweapons-prof heavyweapons-label"
                       "prof-desc prof-desc prof-desc prof-desc palming-prof palming-label medicine-prof medicine-label navigation-prof navigation-label command-prof command-label clubs-prof clubs-label . ."
                       "prof-desc prof-desc prof-desc prof-desc stealth-prof stealth-label science-prof science-label perception-prof perception-label interrogate-prof interrogate-label . luck-use-label luck-use-label luck-use-label"
                       "prof-desc prof-desc prof-desc prof-desc wrangle-prof wrangle-label techuse-prof techuse-label survival-prof survival-label intimidate-prof intimidate-label . luck-label . luck-reroll"
                       "lift-prof lift-label . . contort-prof contort-label remember-prof remember-label tracking-prof tracking-label . . . luck-input luck-max luck-current"
                       "pry-prof pry-label . . throw-prof throw-label . . xenotechuse-prof xenotechuse-label . . . luck-base-label luck-max-label luck-current-label"
                       "roll-mod roll-mod roll-mod roll-mod roll-mod roll-mod roll-mod . gm-mod gm-mod gm-mod gm-mod gm-mod gm-mod gm-mod gm-mod";
  
}

.sheet-sp-stats {
  grid-area: sp-stats;
  display: grid;
  grid-template-rows: 11px 5px 1fr;
  grid-template-areas: "sp-stats-ltl sp-stats-ltl sp-stats-ltl sp-stats-banner sp-stats-ltr sp-stats-ltr"
                       "sp-stats-lbl sp-stats-lbl sp-stats-lbl sp-stats-banner sp-stats-lbr sp-stats-lbr"
                       "armor-shield armor-table build health initiative saves";
}

.sheet-defense {
  grid-area: defense;
  display: grid;
  grid-gap: 4px;
  grid-template-columns: auto;
  grid-template-rows: 22.5px 1fr;
  grid-template-areas: "defense-banner"
                       "defense-table";
  align-self: flex-start;
}

.sheet-attacks {
  grid-area: attacks;
  display: grid;
  grid-gap: 4px;
  grid-template-columns: 6fr 3fr;
  grid-template-rows: 22.5px 1fr;
  grid-template-areas: "attack-banner ."
                         "attack-table attack-table";
  align-self: flex-start;
}

.sheet-gear {
  grid-area:gear;
  display: grid;
  grid-template-columns: 1fr 7fr 3fr;
  grid-template-rows: 22.5px 1fr;
  grid-template-areas: ". gear-banner ."
                         "gear-table gear-table gear-table";
  align-self: flex-start;
  min-width: 280px;
}

.sheet-abilities {
  grid-area: abilities;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 22.5px 1fr;
  grid-template-areas: "abilities-banner"
                       "abilities-table";
  align-self: flex-start;
  background: #000000;
  margin-top: 5px;
}

.sheet-cp {
  grid-area: cp;
  display: flex;
  flex-direction: column;
  align-self: self-start;
  justify-self: center;
  width: 75px;
}

.sheet-resolve-infection {
  grid-area: resolve-infection;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 115px 5px 1fr;
  grid-template-areas: "resolve-table"
                       "infection-banner"
                       "infection-table";
  align-self: flex-start;
}

.sheet-hunger { 
    grid-area: hunger; 
    display: grid;
    grid-template-columns: 1fr 1fr 65px;
    grid-template-rows: auto;
    grid-template-areas: "hunger-banner hunger-banner hunger-input"
                         "hunger-desc-starving-left hunger-desc-starving-right hunger-input"
                         "hunger-desc-emaciated-left hunger-desc-emaciated-right hunger-input"
                         "hunger-desc-dead-left hunger-desc-dead-right hunger-input";
    background: #000000;
    height: 70px;
}

.sheet-build-repair { 
    grid-area: build-repair; 
    display: grid;
    grid-template-columns: 1fr 26px 45px 45px 45px;
    grid-template-rows: 30px 18px 30px 30px 30px 30px;
    grid-template-areas: "build-banner build-banner build-banner build-banner build-banner"
                         "head-desc head-prof head-thresh head-thresh-h head-thresh-q"
                         "crafting-desc crafting-prof crafting-thresh crafting-thresh-h crafting-thresh-q"
                         "mechanics-desc mechanics-prof mechanics-thresh mechanics-thresh-h mechanics-thresh-q"
                         "science-desc science-prof science-thresh science-thresh-h science-thresh-q"
                         "medicine-desc medicine-prof medicine-thresh medicine-thresh-h medicine-thresh-q";
    background: #000000;
    align-self: flex-start;
}

.sheet-encum-table { 
    grid-area: encum; 
    display: grid;
    grid-template-columns: 5fr 3fr 1fr;
    grid-template-rows: 1fr min-content min-content min-content;
    grid-template-areas: "encum-banner encum-banner encum-banner"
                         "encum-head encum-head encum-head"
                         "encum-max-label encum-current-label encum-exceeded-label"
                         "encum-max encum-current encum-exceeded";
    width: 180px;
}


.sheet-experience {
  grid-area: experience;
  display: grid;
  grid-template-columns: 65px 65px;
  grid-template-rows: min-content min-content min-content;
  grid-template-areas: "experience-banner experience-banner"
                       "experience-unused-label experience-total-label"
                       "experience-unused experience-total";
  align-self: flex-start;
  justify-self: center;
}

.sheet-character-name-input {  grid-area: character-name-input;}
.sheet-character-name-label {  grid-area: character-name-label;}
.sheet-player-name-input {  grid-area: player-name-input;}
.sheet-player-name-label {  grid-area: player-name-label;}
.sheet-archetype-primary-input {  grid-area: archetype-primary-input;}
.sheet-archetype-primary-label {  grid-area: archetype-primary-label;}
.sheet-archetype-secondary-input {  grid-area: archetype-secondary-input;}
.sheet-archetype-secondary-label {  grid-area: archetype-secondary-label;}
.sheet-apocalypse-input {  grid-area: apocalypse-input;}
.sheet-apocalypse-label {  grid-area: apocalypse-label;}
.sheet-age-input {  grid-area: age-input;}
.sheet-age-label {  grid-area: age-label;}

.sheet-str-labels { grid-area: str-labels; }
.sheet-str-label { grid-area: str-label; }
.sheet-str-code { grid-area: str-code; }
.sheet-str-input { grid-area: str-input; }
.sheet-str-h { grid-area: str-h; }
.sheet-str-q { grid-area: str-q; }
.sheet-str-h-label { grid-area: str-h-label; }
.sheet-str-q-label { grid-area: str-q-label; }
.sheet-str-temp { grid-area: str-temp; }

.sheet-for-labels { grid-area: for-labels; }
.sheet-for-label { grid-area: for-label; }
.sheet-for-code { grid-area: for-code; }
.sheet-for-input { grid-area: for-input; }
.sheet-for-h { grid-area: for-h; }
.sheet-for-q { grid-area: for-q; }
.sheet-for-h-label { grid-area: for-h-label; }
.sheet-for-q-label { grid-area: for-q-label; }

.sheet-agi-labels { grid-area: agi-labels; }
.sheet-agi-label { grid-area: agi-label; }
.sheet-agi-code { grid-area: agi-code; }
.sheet-agi-input { grid-area: agi-input; }
.sheet-agi-h { grid-area:  agi-h; }
.sheet-agi-q { grid-area: agi-q; }
.sheet-agi-h-label { grid-area: agi-h-label; }
.sheet-agi-q-label { grid-area: agi-q-label; }

.sheet-int-labels { grid-area: int-labels; }
.sheet-int-label { grid-area: int-label; }
.sheet-int-code { grid-area: int-code; }
.sheet-int-input { grid-area: int-input; }
.sheet-int-h { grid-area: int-h; }
.sheet-int-q { grid-area: int-q; }
.sheet-int-h-label { grid-area: int-h-label; }
.sheet-int-q-label { grid-area: int-q-label; }

.sheet-ins-labels { grid-area: ins-labels; }
.sheet-ins-label { grid-area: ins-label; }
.sheet-ins-code { grid-area: ins-code; }
.sheet-ins-input { grid-area: ins-input; }
.sheet-ins-h { grid-area: ins-h; }
.sheet-ins-q { grid-area: ins-q; }
.sheet-ins-h-label { grid-area: ins-h-label; }
.sheet-ins-q-label { grid-area: ins-q-label; }

.sheet-cha-labels { grid-area: cha-labels;}
.sheet-cha-label { grid-area: cha-label;}
.sheet-cha-code { grid-area: cha-code; }
.sheet-cha-input { grid-area: cha-input; }
.sheet-cha-h { grid-area: cha-h; }
.sheet-cha-q { grid-area: cha-q; }
.sheet-cha-h-label { grid-area: cha-h-label; }
.sheet-cha-q-label { grid-area: cha-q-label; }

.sheet-fs-labels { grid-area: fs-labels; }
.sheet-fs-label { grid-area: fs-label; }
.sheet-fs-code { grid-area: fs-code; }
.sheet-fs-input { grid-area: fs-input; }
.sheet-fs-h { grid-area: fs-h; }
.sheet-fs-q { grid-area: fs-q; }
.sheet-fs-h-label { grid-area: fs-h-label; }
.sheet-fs-q-label { grid-area: fs-q-label; }

.sheet-bs-labels { grid-area: bs-labels; }
.sheet-bs-label { grid-area: bs-label; }
.sheet-bs-code { grid-area: bs-code; }
.sheet-bs-input { grid-area: bs-input; }
.sheet-bs-h { grid-area: bs-h; }
.sheet-bs-q { grid-area: bs-q; }
.sheet-bs-h-label { grid-area: bs-h-label; }
.sheet-bs-q-label { grid-area: bs-q-label; }

.sheet-skill-banner { grid-area: skill-banner; }
.sheet-skill-str { grid-area: skill-str; }
.sheet-skill-for { grid-area: skill-for; }
.sheet-skill-agi { grid-area: skill-agi; }
.sheet-skill-int { grid-area: skill-int; }
.sheet-skill-ins { grid-area: skill-ins; }
.sheet-skill-cha { grid-area: skill-cha; }
.sheet-skill-fs { grid-area: skill-fs; }
.sheet-skill-bs { grid-area: skill-bs; } 
.sheet-athletics-prof { grid-area: athletics-prof; }
.sheet-athletics-label { grid-area: athletics-label; }
.sheet-archery-prof { grid-area: archery-prof; } 
.sheet-archery-label { grid-area: archery-label; } 
.sheet-academics-prof { grid-area: academics-prof; }
.sheet-academics-label { grid-area: academics-label; }
.sheet-crafting-prof { grid-area: crafting-prof; } 
.sheet-crafting-label { grid-area: crafting-label; }
.sheet-animalken-prof { grid-area: animalken-prof; }
.sheet-animalken-label { grid-area: animalken-label; }
.sheet-blades-prof { grid-area: blades-prof; } 
.sheet-blades-label { grid-area: blades-label; } 
.sheet-firearms-prof { grid-area: firearms-prof; } 
.sheet-firearms-label { grid-area: firearms-label; }
.sheet-lockpick-prof { grid-area: lockpick-prof; }
.sheet-lockpick-label { grid-area: lockpick-label; }
.sheet-mechanics-prof { grid-area: mechanics-prof; }
.sheet-mechanics-label { grid-area: mechanics-label; }
.sheet-drive-prof { grid-area: drive-prof; }
.sheet-drive-label { grid-area: drive-label; }
.sheet-charm-prof { grid-area: charm-prof; }
.sheet-charm-label { grid-area: charm-label; }
.sheet-brawl-prof { grid-area: brawl-prof; }
.sheet-brawl-label { grid-area: brawl-label; }
.sheet-heavyweapons-prof { grid-area: heavyweapons-prof; }
.sheet-heavyweapons-label { grid-area: heavyweapons-label; }
.sheet-palming-prof { grid-area: palming-prof; }
.sheet-palming-label { grid-area: palming-label; }
.sheet-medicine-prof { grid-area: medicine-prof; }
.sheet-medicine-label { grid-area: medicine-label; }
.sheet-navigation-prof { grid-area: navigation-prof; }
.sheet-navigation-label { grid-area: navigation-label; }
.sheet-command-prof { grid-area: command-prof; }
.sheet-command-label { grid-area: command-label; }
.sheet-clubs-prof { grid-area: clubs-prof; }
.sheet-clubs-label { grid-area: clubs-label; }
.sheet-stealth-prof { grid-area: stealth-prof; }
.sheet-stealth-label { grid-area: stealth-label; }
.sheet-science-prof { grid-area: science-prof; }
.sheet-science-label { grid-area: science-label; }
.sheet-perception-prof { grid-area: perception-prof; }
.sheet-perception-label { grid-area: perception-label; }
.sheet-interrogate-prof { grid-area: interrogate-prof; }
.sheet-interrogate-label { grid-area: interrogate-label; }
.sheet-wrangle-prof { grid-area: wrangle-prof; }
.sheet-wrangle-label { grid-area: wrangle-label; }
.sheet-techuse-prof { grid-area: techuse-prof; }
.sheet-techuse-label { grid-area: techuse-label; }
.sheet-survival-prof { grid-area: survival-prof; }
.sheet-survival-label { grid-area: survival-label; }
.sheet-intimidate-prof { grid-area: intimidate-prof; }
.sheet-intimidate-label { grid-area: intimidate-label; }
.sheet-tracking-prof { grid-area: tracking-prof; }
.sheet-tracking-label { grid-area: tracking-label; }
.sheet-xenotechuse-prof { grid-area: xenotechuse-prof; }
.sheet-xenotechuse-label { grid-area: xenotechuse-label; }

.sheet-contort-prof { grid-area: contort-prof; }
.sheet-contort-label { grid-area: contort-label; }
.sheet-lift-prof { grid-area: lift-prof; }
.sheet-lift-label { grid-area: lift-label; }
.sheet-pry-prof { grid-area: pry-prof; }
.sheet-pry-label { grid-area: pry-label; }
.sheet-remember-prof { grid-area: remember-prof; }
.sheet-remember-label { grid-area: remember-label; }
.sheet-throw-prof { grid-area: throw-prof; }
.sheet-throw-label { grid-area: throw-label; }

.sheet-prof-code-not { grid-area: prof-code-not; }
.sheet-prof-desc-not { grid-area: prof-desc-not; }
.sheet-prof-code-p { grid-area: prof-code-p; } 
.sheet-prof-desc-p { grid-area: prof-desc-p; }
.sheet-prof-code-s { grid-area: prof-code-s; } 
.sheet-prof-desc-t { grid-area: prof-desc-t; }
.sheet-prof-code-t { grid-area: prof-code-t; } 
.sheet-prof-desc-t { grid-area: prof-desc-t; }
.sheet-prof-code-m { grid-area: prof-code-m; } 
.sheet-prof-desc-m { grid-area: prof-desc-m; }

.sheet-luck-max { grid-area: luck-max; }

.sheet-init-labels { grid-area: init-labels; }
.sheet-init-5 { grid-area: init-5; }
.sheet-init-5-l { grid-area: init-5-l; }
.sheet-init-10-l { grid-area: init-10-l; }
.sheet-init-15-l { grid-area: init-15-l; }

.sheet-save-salvage { grid-area: save-salvage; } 
.sheet-save-resilience { grid-area: save-resilience; }  
.sheet-save-resolve { grid-area: save-resolve; }  
.sheet-save-immunity { grid-area: save-immunity; } 

.sheet-salvage-labels { grid-area: salvage-labels; } 
.sheet-salvage-input { grid-area: salvage-input; } 
.sheet-salvage-h { grid-area: salvage-h; } 
.sheet-salvage-q { grid-area: salvage-q; } 
.sheet-salvage-h-label { grid-area: salvage-h-label; } 
.sheet-salvage-q-label { grid-area: salvage-q-label; }

.sheet-resilience-labels { grid-area: resilience-labels; } 
.sheet-resilience-input { grid-area: resilience-input; } 
.sheet-resilience-h { grid-area: resilience-h; } 
.sheet-resilience-q { grid-area: resilience-q; } 
.sheet-resilience-h-label { grid-area: resilience-h-label; } 
.sheet-resilience-q-label { grid-area: resilience-q-label; }

.sheet-resolve-labels { grid-area: resolve-labels; } 
.sheet-resolve-input { grid-area: resolve-input; } 
.sheet-resolve-h { grid-area: resolve-h; } 
.sheet-resolve-q { grid-area: resolve-q; } 
.sheet-resolve-h-label { grid-area: resolve-h-label; } 
.sheet-resolve-q-label { grid-area: resolve-q-label; }

.sheet-immunity-labels { grid-area: immunity-labels; }
.sheet-immunity-input { grid-area: immunity-input; } 
.sheet-immunity-h { grid-area: immunity-h; } 
.sheet-immunity-q { grid-area: immunity-q; } 
.sheet-immunity-h-label { grid-area: immunity-h-label; } 
.sheet-immunity-q-label { grid-area: immunity-q-label; }        

.sheet-health-current { grid-area: health-current; } 
.sheet-health-max-label { grid-area: health-max-label; }  

.sheet-armor-col-head-1 { grid-area: armor-col-head-1; }
.sheet-armor-col-head-2 { grid-area: armor-col-head-2; }
.sheet-armor-col-head-3 { grid-area: armor-col-head-3; }

.sheet-shield-label { grid-area: shield-label; }
.sheet-shield-input-max-label { grid-area: shield-input-max-label; }
.sheet-shield-input-current { grid-area: shield-input-current; }
.sheet-shield-input-current-label { grid-area: shield-input-current-label; }

.sheet-attack-row { grid-area: attack-row; }
.sheet-attack-row-brawl { grid-area: attack-row-brawl; }

.sheet-gear-row { grid-area: gear-row; }
.sheet-gear-banner { grid-area: gear-banner; }

.sheet-unnerved-desc { grid-area: unnerved-desc; }
.sheet-shaken-desc { grid-area: shaken-desc; }
.sheet-insanity-desc { grid-area: insanity-desc; }
.sheet-unnerved-status { grid-area: unnerved-status; }
.sheet-shaken-status { grid-area: shaken-status; }
.sheet-insanity-status { grid-area: insanity-status; }

.sheet-infection-banner { grid-area: infection-banner; }
.sheet-infection-col-head-1 { grid-area: infection-col-head-1; }
.sheet-infection-col-head-2 { grid-area: infection-col-head-2; }
.sheet-infection-col-head-3 { grid-area: infection-col-head-3; }
.sheet-incubation-no { grid-area: incubation-no; }
.sheet-incubation-desc  { grid-area: incubation-desc; }
.sheet-incubation-status { grid-area: incubation-status; }
.sheet-gestation-no { grid-area: gestation-no; }
.sheet-gestation-desc  { grid-area: gestation-desc; }
.sheet-gestation-status { grid-area: gestation-status; }
.sheet-symptomatic-no { grid-area: symptomatic-no; }
.sheet-symptomatic-desc  { grid-area: symptomatic-desc; }
.sheet-symptomatic-status { grid-area: symptomatic-status; }
.sheet-prodromal-no { grid-area: prodromal-no; }
.sheet-prodromal-desc  { grid-area: prodromal-desc; }
.sheet-prodromal-status { grid-area: prodromal-status; }
.sheet-acute-no { grid-area: acute-no; }
.sheet-acute-desc  { grid-area: acute-desc; }
.sheet-acute-status { grid-area: acute-status; }
.sheet-transformdie-no { grid-area: transformdie-no; }
.sheet-transformdie-desc  { grid-area: transformdie-desc; }
.sheet-transformdie-status { grid-area: transformdie-status; }

.sheet-hunger-banner { grid-area: hunger-banner; }
.sheet-hunger-desc-left.sheet-starving { grid-area: hunger-desc-starving-left; } 
.sheet-hunger-desc-right.sheet-starving { grid-area: hunger-desc-starving-right; }
.sheet-hunger-desc-left.sheet-emaciated { grid-area: hunger-desc-emaciated-left; } 
.sheet-hunger-desc-right.sheet-emaciated { grid-area: hunger-desc-emaciated-right; }
.sheet-hunger-desc-left.sheet-dead { grid-area: hunger-desc-dead-left; }
.sheet-hunger-desc-right.sheet-dead { grid-area: hunger-desc-dead-right; }
.sheet-hunger-input { grid-area: hunger-input; }

.sheet-build-banner { grid-area: build-banner; }
.sheet-build-repair .sheet-crafting.sheet-desc { grid-area: crafting-desc; }
.sheet-build-repair .sheet-mechanics.sheet-desc { grid-area: mechanics-desc; }
.sheet-build-repair .sheet-science.sheet-desc { grid-area: science-desc; }
.sheet-build-repair .sheet-medicine.sheet-desc { grid-area: medicine-desc; }
.sheet-build-repair .sheet-head.sheet-build-prof { grid-area: head-prof; }
.sheet-build-repair .sheet-crafting.sheet-build-prof { grid-area: crafting-prof; }
.sheet-build-repair .sheet-mechanics.sheet-build-prof { grid-area: mechanics-prof; }
.sheet-build-repair .sheet-science.sheet-build-prof { grid-area: science-prof; }
.sheet-build-repair .sheet-medicine.sheet-build-prof { grid-area: medicine-prof; }
.sheet-build-repair .sheet-crafting.sheet-build-threshold { grid-area: crafting-thresh; }
.sheet-build-repair .sheet-mechanics.sheet-build-threshold { grid-area: mechanics-thresh; }
.sheet-build-repair .sheet-science.sheet-build-threshold { grid-area: science-thresh; }
.sheet-build-repair .sheet-medicine.sheet-build-threshold { grid-area: medicine-thresh; }
.sheet-build-repair .sheet-head.sheet-build-threshold-h { grid-area: head-thresh-h; }
.sheet-build-repair .sheet-crafting.sheet-build-threshold-h { grid-area: crafting-thresh-h; }
.sheet-build-repair .sheet-mechanics.sheet-build-threshold-h { grid-area: mechanics-thresh-h; }
.sheet-build-repair .sheet-science.sheet-build-threshold-h { grid-area: science-thresh-h; }
.sheet-build-repair .sheet-medicine.sheet-build-threshold-h { grid-area: medicine-thresh-h; }
.sheet-build-repair .sheet-head.sheet-build-threshold-q { grid-area: head-thresh-q; }
.sheet-build-repair .sheet-crafting.sheet-build-threshold-q { grid-area: crafting-thresh-q; }
.sheet-build-repair .sheet-mechanics.sheet-build-threshold-q { grid-area: mechanics-thresh-q; }
.sheet-build-repair .sheet-science.sheet-build-threshold-q { grid-area: science-thresh-q; }
.sheet-build-repair .sheet-medicine.sheet-build-threshold-q { grid-area: medicine-thresh-q; }

.sheet-encum-banner { grid-area: encum-banner; }
.sheet-encum-head { grid-area: encum-head; }
.sheet-encum.sheet-max-label { grid-area: encum-max-label; }
.sheet-encum.sheet-current-label { grid-area: encum-current-label; }
.sheet-encum.sheet-exceeded-label { grid-area: encum-exceeded-label; }
.sheet-encum.sheet-max { grid-area: encum-max; }
.sheet-encum.sheet-current { grid-area: encum-current; }

.sheet-experience-unused-label { grid-area: experience-unused-label; }
.sheet-experience-total-label { grid-area: experience-total-label; }
.sheet-experience-unused { grid-area: experience-unused; }
.sheet-experience-total { grid-area: experience-total; }

/* ##############  ROLL TEMPLATE   ################# */

/* Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-maxapoc {
  margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-maxapoc {
  margin-left: -7px;
}

.sheet-rolltemplate-maxapoc .sheet-container {
  border: 1px double;
  /* by default, the border is the same color as the header. You can change this here, e.g. to black */
  border-color: var(--header-bg-color);
}

/* Header formatting - title and subtitle */
.sheet-rolltemplate-maxapoc .sheet-header {
  background-color: var(--header-bg-color);
  text-align: left;
  color: var(--header-text-color);
  padding: 5px;
}
.sheet-rolltemplate-maxapoc .sheet-title {
  font-size: 20px;
  font-family: 'Bangers';
}
.sheet-rolltemplate-maxapoc .sheet-subtitle {
  font-size: 18px;
  font-family: 'Blinker';
  font-weight: bold;
}

/* example colors */
.sheet-rolltemplate-maxapoc .sheet-container {
  --header-bg-color: #a90d04;
  --header-text-color: #FFFFFF;
  border: 8px double black;
}
/* Allprops part */
.sheet-rolltemplate-maxapoc .sheet-content {
  display: grid;
  background: #FFF;
  /* Header formatting - modify the column layout below */
  grid-template-columns: auto auto;
  /* Line height to match default roll template */
  line-height:1.4em;
}
.sheet-rolltemplate-maxapoc .sheet-content > div {
  padding: 5px;
}

/* Left column */
.sheet-rolltemplate-maxapoc .sheet-content .sheet-key {
  font-weight: bold;
  padding-right: 10px;
  text-align: right;
}

/* Description field */
.sheet-rolltemplate-maxapoc .sheet-desc {
  grid-column: span 2;
  padding: 5px;
  text-align: center;
  background:#EEE;
}