/*------------------------------------------------*\
  #GENERAL
\*------------------------------------------------*/

input[type="range"].sheet-progress-bar{
  width: 100px;
}
input[type="range"].sheet-progress-bar::-moz-range-thumb{
  background: transparent; 
  border-color: transparent;
  color: transparent;
}
input[type="range"].sheet-progress-bar::-moz-range-progress{
  background: green;
  height: 10px;
}
input[type="range"].sheet-progress-bar::-moz-range-track{
  background: red;
  height: 10px;
}

input[type="number"].sheet-progress-bar{
  border: 2px solid black;
}

button.sheet-hidden{
    display: none;
}

/* --------- Text ------------- */


.sheet-bold{
  font-weight: 800;
  font-size: medium;
}


label {
  margin: 0px;
  width: 70px;
  text-transform: capitalize;
  font-size: 0.8em;
  height: 
  /*overflow: hidden;*/
}
label.sheet-title{
  width: 130px;
  font-size: 1.3em;
  text-align: center;
}

h3{
  text-align: center;
}

.sheet-short{
  width: 50px;
}

.sheet-txtcenter{
  text-align: center;
}

.sheet-slash{
  font-size: 2em;
  font-weight: bold;
}


/* --------- Inputs ------------- */

input[type="text"] {
  background-color: transparent;
  border-style: none none solid none;
  border-width: 2px;
  border-radius: 0px;
  border-color: black;
  padding: 0px 4px;
  margin: 0px 4px;
  width: auto;
}


input[type="number"]{
  background-color: transparent;
  border-style: none none solid none;
  border-width: 2px;
  border-radius: 0px;
  border-color: black;
  text-align: center;
  width: 40px;
}

.sheet-w30,
input[type="text"].sheet-w30,
input[type="number"].sheet-w30{
  width: 30px;
}

.sheet-w40,
input[type="text"].sheet-w40,
input[type="number"].sheet-w40,{
  width: 40px;
}

.sheet-w50,
input[type="text"].sheet-w50,
input[type="number"].sheet-w50{
  width: 50px;
}

.sheet-w70,
input[type="text"].sheet-w70,
input[type="number"].sheet-w70{
  width: 70px;
}

.sheet-w110,
input[type="text"].sheet-w110,
input[type="number"].sheet-w110{
  width: 110px;
}

input[type="checkbox"].sheet-checkbox {
  border-style: solid black;
  border-radius: 0px;
}

input[type="text"].sheet-stat,
input[type="number"].sheet-stat{
  font-size: 2em;
  font-weight: bold;
}

/* highlights empty fields with light pink, if the fields have placeholder text */
textarea:placeholder-shown,
input[type="text"]:placeholder-shown,
input[type="number"]:placeholder-shown{
  background-color: #EAC9D1;
}

/* higlight selected input with gray*/
textarea:focus,
input[type="text"]:focus,
input[type="number"]:focus{
  background-color: #ccc;
}



/* -----Hides up/down buttons on numberfields that don't need them ---*/

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-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],
input[type=number].sheet-txtfield {
  -moz-appearance: textfield;
}


/* ------- Buttons ---------- */

button[type="roll"].sheet-txt-btn:before{
  content: ' ';
}

button[type="roll"].sheet-txt-btn{
  height: 19px;
  border: 2px solid black;
  background-color: transparent;
  margin-left: 5px;
  font-weight: bold;
  padding: 2px 5px 4px 5px;
}

button[type="roll"].sheet-txt-btn:hover{
    background-color: #87AFC7;
    border-radius: 10px;
    background-position: 0 -28px;
}


/*-----------------------------------------------------------------*\
  #SECTIONS
\*-----------------------------------------------------------------*/

.sheet-version{
  float: left;
  margin-top: -114px;
  width: 240px;
  margin-left: 550px;
  display: flex;
  flex-flow: row nowrap;
}


/* --------- General Section Styling ------------- */
.sheet-section {
  display: flex;
  padding: 5px;
  border: 2px solid black;
  background: white;
  opacity: 0.9;
}

.sheet-columnflex {
  display: flex;
  flex-direction: column;
}
.sheet-rowflex {
  display: flex;
  flex-direction: row;
}
.sheet-wrap {
  flex-wrap: wrap;
}
.sheet-nowrap {
  flex-wrap: nowrap;
}

.sheet-center {
  align-items: center;
}

.sheet-middle {
  justify-content: center;
}
.sheet-spaced {
  justify-content: space-evenly;
}





/* ------------ PAGES ---------- */

div.sheet-page1 {
  display: grid;
  grid-template-columns: 4fr 8fr 5fr 6fr;
  grid-template-rows: repeat(5, 2fr) 5fr 4fr;
  grid-template-areas:"name name    name    name     " 
                      "attr skills  hp      condition"
                      "attr skills  prof    condition"
                      "attr skills  ac      condition"
                      "attr skills  speed   bulk     "
                      "attr skills  saves   inventory" 
                      "attr attacks attacks attacks  "; 
  width: 850px;
  height: 1000px;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Stargate-RPG/images/bg.png);
  background-repeat: no-repeat;
  background-size: 700px 700px;
  background-position: center;
  background-color: black;
  margin-top: -84px;
}

div.sheet-page2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:    1fr 1fr 1fr;
  grid-template-areas:"racial feats    "
                      "class  equipment"
                      "prof   notes    ";
  width: 840px;
  height: 990px;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Stargate-RPG/images/bg.png);
  background-repeat: no-repeat;
  background-size: 700px 700px;
  background-position: center;
  background-color: black;
  margin-top: -84px;
  grid-gap: 10px;
  padding: 5px;
}

div.sheet-page3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:    1fr 1fr;
  grid-template-areas:"settings other"
                      "ammo     changelog";
  width: 840px;
  height: 990px;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Stargate-RPG/images/bg.png);
  background-repeat: no-repeat;
  background-size: 700px 700px;
  background-position: center;
  background-color: black;
  margin-top: -84px;
  grid-gap: 10px;
  padding: 5px;
}

/* ------------ Section Specific ---------- */


/* ----------- page 1 ------------ */

/* NAME SECTION */
div.sheet-name{
  grid-area: name;
  padding: 5px 0px 0px 0px;
  margin: 5px;
  width: 834px;
}

div.sheet-name label{
    padding-left: 10px;
}

div.sheet-name div select{
  width: 50px;
  margin-left: 14px;
}

div.sheet-name input[type="number"]{
  height: 20px;
}


/* ATTRS SECTION */
div.sheet-attr{
  grid-area: attr;
}
div.sheet-attr .sheet-stat{
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Stargate-RPG/images/attr.png);
  background-repeat: no-repeat;
  background-size: 124px 113px;
  width: 120px;
  height: 120px;
  background-position: center;
}
div.sheet-attr span:not(.sheet-mod),
div.sheet-skills span:not(.sheet-mod){
  font-weight: bold;
  font-size: 1.1em;
  text-transform: uppercase;
}

div.sheet-attr span:not(.sheet-mod){
  font-size: 1.5em;
}

div.sheet-skills span.sheet-mod,
div.sheet-prof span.sheet-mod,
div.sheet-saves span.sheet-mod{
  width: 25px;
  margin-top: 4px;
  border-style: none none solid none;
  margin-bottom: 4px;
  border-width: 2px;
  text-align: center;
}

div.sheet-attr span.sheet-mod{
  width: 25px;
  margin-top: 4px;
  border-style: none;
  margin-bottom: 17px;
  border-width: 2px;
  text-align: center;
  font-weight: bold;
}

div.sheet-attr input[type="number"]{
  width: 2em;
  margin-bottom: 7px;
  border-style: none;
  font-weight: bold;
  font-size: 1.5em;
}

div.sheet-attr button[type="roll"].sheet-large{
    font-size: 1.5em;
    margin-bottom: -3px;
    border-radius: 15px;
}


/* skills SECTION */

div.sheet-skills{
  grid-area:skills;
  padding-left: 10px;
  margin: 5px 2px 5px 5px;
}

div.sheet-skills div{
  align-content: space-around;
}

div.sheet-skills span:not(.sheet-mod),
div.sheet-condition span{
  text-transform: uppercase;
}

div.sheet-skills span:not(.sheet-mod){
    font-size: 0.7em;
    padding-top: 9px;
    margin-left: 0px;
}

div.sheet-skills .sheet-mod{
  margin: 0px 4px 0px 4px; 
}

div.sheet-skills button[type="roll"]{
    margin-right: 0px;
    text-transform: uppercase;
    font-size: 1.2em;
}

div.sheet-skills input[type="number"],
div.sheet-saves input[type="number"]{
    margin-left: 5px;
}

/* hp SECTION */

div.sheet-hp{
  grid-area:hp;
}

div.sheet-hp > div:nth-child(2) {
  width: 100px;
}


div.sheet-hp div,
div.sheet-prof div,
div.sheet-ac div,
div.sheet-speed div{
  flex-grow: .4;
  margin: 5px;
}

div.sheet-hp label,
div.sheet-prof label{
  font-size: 1.1em;
  font-weight: bold;
}

div.sheet-ac label,
div.sheet-speed .sheet-speed label{
  font-size: 1.2em;
  font-weight: bold;
}

div.sheet-hp label.sheet-txtcenter{
  font-size: 1.8em;
}

div.sheet-hp .sheet-determ label{
  font-size: 1.2em;
  margin-right: 25px;
}

/* condition SECTION */

div.sheet-condition{
  grid-area:condition;
  padding-left: 10px;
  margin: 8px 25px 8px 4px; 
}

div.sheet-condition span{
  padding-left: 5px;
  font-weight: bold;
  font-size: 12px;
}

/* prof SECTION */

div.sheet-prof{
  grid-area:prof;
}

div.sheet-prof > div:nth-child(1) > label:nth-child(1){
  width: 80px;
}

div.sheet-prof > div:nth-child(1){
  padding: 5px 1px;
}

div.sheet-prof > div:nth-child(2) > label:nth-child(1) {
 padding: 0px;
}


div.sheet-prof .sheet-init{
  margin-left: 2px;
  margin-right: 2px;
  padding-left: 2px;
  padding-right: 2px;
}

div.sheet-prof .sheet-init button{
  width: 63px;
  margin-left: 0px;
  padding-right: 7px;
  padding-left: 2px;
}


div.sheet-prof .sheet-moxie{
  width: 62px;
}

.sheet-prof > div:nth-child(2) > label:nth-child(1) {
  width: 56px;
}


div.sheet-moxie > label:nth-child(1) {
  width: 54px;
}


/* ac SECTION */

div.sheet-ac{
  grid-area:ac;
}

div.sheet-prof label.sheet-wide,
div.sheet-ac label.sheet-wide{
  width: 96px;
  padding: 0px;
}


/* speed SECTION */

div.sheet-speed{
  grid-area:speed;
}

div.sheet-speed input[type="text"]{
  padding: 5px
}

div.sheet-speed div.sheet-death label{
    width: 100px;
    padding: 0px;
}

div.sheet-speed div.sheet-death span{
    font-size: 0.8em;
    font-weight: bold;
}

div.sheet-speed div.sheet-death div{
  margin: 5px 0px;
}

div.sheet-death > div:nth-child(3) > span:nth-child(4){
    padding-right: 9px;
}

div.sheet-speed div.sheet-death input[type="checkbox"]{
    transform: scale(0.8);
}


/* saves SECTION */

div.sheet-saves{
  grid-area:saves;
  margin: 5px 20px 5px 5px;
  justify-content: space-between;
}

div.sheet-saves div{
  padding-left: 8px;
}

div.sheet-saves span.sheet-mod{
  margin: 0px 4px; 
}

div.sheet-saves div.sheet-mb20{
    margin-bottom: 20px;
}



/* BULK SECTION */

div.sheet-bulk{
  grid-area:bulk;
  width: 156px;
  height: 80px;
}

/* INVENTORY SECTION */

div.sheet-inventory{
  grid-area:inventory;
  width: 156px;
}

div.sheet-inventory textarea{
  width: 95%;
  height: 95%;
  margin-bottom: 0px;
}


/* attacks SECTION */

div.sheet-attacks{
  grid-area:attacks;
  display: grid;
  grid-template-columns: 3.5fr repeat(5, 1fr) 2fr;
  grid-template-rows: repeat(5, 1fr);
  margin: 0px 20px 10px 5px;
}

div.sheet-attacks label{
  text-transform: capitalize;
}

div.sheet-attacks .sheet-name{
  padding-left: 42px;
}

div.sheet-attacks .sheet-dmg-type{
  padding-left: 9px;
}

div.sheet-attacks span{
  height: 25px;
}

div.sheet-attacks div button[type="roll"],
div.sheet-attacks div input[type="text"]{
 height: 20px;
}

div.sheet-attacks .sheet-mr15{
    margin-right: 10px;
}

div.sheet-attacks .sheet-ml15{
    margin-left: 15px;
}

div.sheet-attacks .sheet-pl20{
    padding-left: 20px;
}





/*  -------- Page 2 -------- */


div.sheet-page2 label{
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
  width: 140px;
}

div.sheet-page2 textarea{
  width: 390px;
  height: 280px;
  margin-bottom: 0px;
}


/*  -------- Page 3 -------- */

div.sheet-page3 .sheet-settings label,
div.sheet-page3 .sheet-changelog label,
div.sheet-page3 label.sheet-other{
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
  width: 250px;
}


/* Settings Section */

div.sheet-settings{
  grid-area:settings;
}

div.sheet-settings select{
  width: 60px;
}

div.sheet-settings div,
div.sheet-other div{
  padding: 10px;
}


/* Changelog Section */

div.sheet-changelog{
  grid-area:changelog;
}

div.sheet-changelog img.sheet-phoenix{
  width: 150px;
  height: 150px;
}

/* ammo SECTION */

div.sheet-ammo.sheet-grid{
  grid-area:ammo;
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 5px 20px 5px 0px;
}

div.sheet-ammo label{
  text-align: center;
  padding: 0px 0px 5px 0px;
}

div.sheet-ammo div{
  margin: 7px 1px 7px 1px;
}

div.sheet-other{
  grid-area: other;
}

div.sheet-other span{
  font-size: 1.3em;
  margin-right: 10px;
}

div.sheet-settings input[type="text"],
div.sheet-other input[type="text"]{
    width:395px;
}

div.sheet-other textarea.sheet-dmg{
  height: 60px;
  width: 245px;
}

/*  ------------ Tabs ---------- */

input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3{
  display: grid;
}

/* styles tab button */
input.sheet-tab{
  width: 150px;
  height: 22px;
  position: relative;
  top: -23px;
  left: 82px;

  margin: 5px 0px 5px 0px;
  padding: 0px;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
}

input.sheet-tab + span::before{
  content: attr(title);
  width: 150px;
  height: 22px;
  position: absolute;
  top: 50px;
  left: 110px;

  border: solid 2px grey;
  border-radius: 13px;
  padding-bottom: 2px;
  text-align: center;
  font-size: 18px;
  display: inline-block;
  background: white;
}

input.sheet-tab:checked + span::before{
  background: #e5e5e5;
}

input.sheet-tab2 + span::before{
  left: 263px;
}


input.sheet-tab3 + span::before{
  left: 419px;
}

div.sheet-tab-content{
  display: none;
}


/* Tabs */

/* 
.sheet-character,
.sheet-journal,
.sheet-config{
  display: none;
}

/* show the selected tab */
/* 
.sheet-tabstoggle[value="character"] ~ div.sheet-character,
.sheet-tabstoggle[value="journal"] ~ div.sheet-journal,
.sheet-tabstoggle[value="configuration"] ~ div.sheet-config{
  display: grid;
}
*/


/*------------------------------------*\
  #ROLL TEMPLATES
\*------------------------------------*/

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

.sheet-rolltemplate-stargate .sheet-container {
  border: 3px solid black;
  border-radius: 3px;
}

/* Header formatting - title and subtitle */
.sheet-rolltemplate-stargate .sheet-header {
  background-color: var(--header-bg-color);
  color: var(--header-text-color);
  text-align: left;
  text-transform: capitalize;
  padding: 5px;
  border-bottom: 2px solid black;
}
.sheet-rolltemplate-stargate .sheet-title {
  font-size:1.2em;
  font-weight: bold;
}
/* Stargate Phoenix logo*/
.sheet-rolltemplate-stargate .sheet-title img.sheet-phoenix{
  width: 33px;
  height: 33px;
  float: right;
}

.sheet-rolltemplate-stargate .sheet-subtitle {
  font-size:.9em;
}

/* example colors */
.sheet-rolltemplate-stargate .sheet-container {
  /* this is the default color */
  --header-bg-color: #a83521;
  --header-text-color: #FFF;
}

/* alt template colors */
.sheet-rolltemplate-stargate .sheet-container.sheet-color-green {
  --header-bg-color: #008000;
}
.sheet-rolltemplate-stargate .sheet-container.sheet-color-black {
  --header-bg-color: #000;
}
.sheet-rolltemplate-stargate .sheet-container.sheet-color-white {
  --header-bg-color: #FFF;
  --header-text-color: #000;
}

/* Allprops part */
.sheet-rolltemplate-stargate .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-stargate .sheet-content > div {
  padding: 5px;
}

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

/* Empty rule, use this if you want to change the right column 
.sheet-rolltemplate-stargate .sheet-value {
}
*/

/* Make even-numbered rows grey */
.sheet-rolltemplate-stargate .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-stargate .sheet-content :nth-child(4n) {
  background:#EEE;
}

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