/*--------------------- Grid Container -------------------*/
* {
  box-sizing: border-box; 
  color: #39ff14; 
  border-color:#39ff14;
}


body{
  background-image: url("../img/fallout_green.png"); 

} 

button {
  background-color: #031f01; 
  border-radius: 5px;
  outline: none;
}

div.select {
  display: inline-block;
  width: 10rem;
  text-align: center;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas: "nameArea nameArea healthArmor healthArmor"
                       "primaryStat secondaryStat healthArmor healthArmor" 
                       "primaryStat secondaryStat apSpoolImpEndurance apSpoolImpEndurance" 
                       "skills1 skills2 skills3 skills4";   
}

.nameArea { 
  display: grid;
  grid-area: nameArea;
  margin-left: 4%;
  align-items: start;
 }

.healthArmor {
  grid-area: healthArmor;
}

.primaryStat {
  grid-area: primaryStat;
}

.secondaryStat {
  grid-area: secondaryStat;
}

.apSpoolImpEndurance {
  grid-area: apSpoolImpEndurance;
}

.skills1 {
  grid-area: skills1;
}

.skills2 {
  grid-area: skills2;
}

.skills3 {
  grid-area: skills3;
}

.skills4 {
  grid-area: skills4;
}

.container {
  justify-self: center;
  align-items: center;
  width: auto; 
  height: 230px;   
} 

.skills1.container {
  min-width: 260px;
}

.skills2.container {
  min-width: 306px;
}

.skills4.container {
  min-width: 240px;
} /* fix width here*/

/*--------------------- Title Styles -------------------*/

.charSheet {
  text-align: center;
  text-transform: uppercase;
}
/*---------------------------Dropdowns-----------------------------*/

.nameSpace.sexDropdown {
  width: 113px;
  background: #091a0d;
}

.nameSpace.raceDropdown {
  width: 220px;
}

.armorSelectStyle ::-webkit-scrollbar,
.nameSpace.raceDropdown ::-webkit-scrollbar {
  width: 1em;
}
 
.armorSelectStyle ::-webkit-scrollbar-track,
.nameSpace.raceDropdown ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0.7);
}
 
.armorSelectStyle ::-webkit-scrollbar-thumb,
.nameSpace.raceDropdown ::-webkit-scrollbar-thumb {
  background-color: #39ff14;
  outline: 1px solid slategrey;
}

/*--------------------- Input Field Styles -------------------*/

#modSkillPts:hover, #modApSpool:hover,
#normalTotalDT:hover, #normalTotalDR:hover,
#laserTotalDT:hover, #laserTotalDR:hover,
#fireTotalDT:hover, #fireTotalDR:hover,
#plasmaTotalDT:hover, #plasmaTotalDR:hover,
#explodeTotalDT:hover, #explodeTotalDR:hover {
  background-color: #bec5d1;
  cursor: not-allowed;
}

.nameSpace{
    text-align: center;
    border: 0;
    border-bottom: 1px solid #39ff14;
    outline: 0;
}

.nameArea span, p, select {
    margin-left: 5px;
}

.numSpace{
    text-align: center;
    border: 0;
    border-bottom: 2px solid #FF0000;
    outline: 0;
    font-weight: bold;
    width: 35px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}/*Removes Number spinners from input type=number fields*/

input[type=number] {
    -moz-appearance:textfield;
}/*Removes Number spinners for firefox*/

.primaryStat input, 
.secondaryStat input, 
.skills1 input,
.skills2 input,
.skills3 input,
.skills4 input,
.healthArmor input{
  width: 32px;
  text-align: center;
}

#total{
  margin-left: 7.5px;
}

.primaryStat input, 
.secondaryStat input, 
.skills1 input,
.skills2 input,
.skills3 input,
.skills4 input,
.numSpace,
.nameSpace,
.healthArmor input,
.apSpoolImpEndurance input{
  background: transparent;
  outline: none;
}/*Makes all input fields transparent*/

.skName{
  cursor: pointer;
  display: inline;
  border-radius: 3px;
  padding: 2px 5px 2px 0px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}/*Skill names styles*/

#normalTotalDT, #normalTotalDR,
#laserTotalDT, #laserTotalDR,
#fireTotalDT, #fireTotalDR,
#plasmaTotalDT, #plasmaTotalDR,
#explodeTotalDT, #explodeTotalDR {
  font-weight: 600;
}

input.dmg {
  width: 55px;
  text-align: center;
}

.throwTable {
  position: relative;
  left: 51%;
  bottom: 21%;  
}

.throwTable td input, button {
  margin-left: 6px;
}

#thrownButton {
  position: absolute; 
  height: 23px;
  top: 24%; 
  white-space: nowrap; 
  margin-left: 1px;
}

#dmgRollInput {
  position: absolute; 
  height: 22.4px;
  top: 50.5%;   
  margin-left: 1px; 
}

input[name=dmgRoll] {
  width: 115px;
}

#dmgTaken {
  border-bottom-color: #fa0702;
}

table.throwTable td:first-child {
  font-weight: bold;
}

tfoot #thrownResultTotal {
  text-align: center;
  font-weight: bold;
}

tfoot #thrownRollResults, tfoot td {  
  font-weight: normal;
  margin-left: 10px;
  overflow: hidden;
  white-space: nowrap; 
  text-overflow: ellipsis;
  max-width: 100px;
}

.apSpoolImpEndurance h2{
  text-align: left;
  padding-bottom: 10px;
}

.apSpoolImpEndurance input[name=dmg] {
  width: 50px;
  font-size: 18pt;
  font-family: "Helvetica Nue", serif;
  font-weight: bold;
  text-align: center;
  border: 0;
  border-bottom: 2px solid black;
  outline: 0;
}

.selectWidth {
  width: 260px;
  display: block;
  border-bottom: solid 1px #39ff14;
  margin-bottom: 4px;
}

td:nth-last-child(2):not(.alignFix) {
  text-align: center;
}

#thrownRollResults {
  cursor: help;
}

.spollSegmentWrapper {
  margin-top: 0;
  position: relative;
}

.spoolSegmentWrapper > h2 {  
  display: inline;
}

.healthAndDamageWrapper {
  position: relative;
  left: 60%;
  bottom: 28%;
}

#armorButton {
  margin: 5px 0 20px 5px;
}

#undergarmentButton {
  margin: 5px 0 0 5px;
}

input[type='checkbox'] { 
  height: 13px;
  position: relative;
  margin-top: 0.5rem;
  right: 10px;
  top: 3px;
}

#spoolInput{
  width: 30px;
  text-align: center;
  margin-left: .5rem;
  height: 1.2rem;
}

::selection {
  color: #0c210e;
  background: #39ff14;
}

::-moz-selection { 
  color: #0c210e;
  background: #39ff14;
 }

.instructionsButton {
  position: relative;
  display: flex;
  left: 7%;
  width: 7.4em;
  margin-top: 20px;
  margin-left: 7.5%;
}

.notesAreaStyle {
  margin-top: 1rem;
  width: 255px;
  height: 6rem;
  max-width: 260px;
  background-color: #031f01;
  border-color:#39ff14;
  border-radius: 3px;
  /*resize: none;*/
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.notesAreaStyle:focus {
  border-color: #39ff14;
  outline: none;  
}

.notesAreaStyle::placeholder {
  color: #7cb07b;
}

.notesAreaStyle::-webkit-scrollbar {
  width: 7px;cursor:
}

.notesAreaStyle::-webkit-scrollbar-track {
}

.notesAreaStyle::-webkit-scrollbar-thumb {
  background-color: #39ff14 ;
  border: 3px solid #39ff14;
  cursor: pointer;
}

.notesAreaStyle::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
}

/*--------------------- Save/Load Styles ------------------------*/

.button {
   position: relative;
   user-select: none;
   top: 50px;
   left: 25%;
   border: 1px solid #39ff14;
   background: #7cb07b;
   background: -webkit-gradient(linear, left top, left bottom, from(#0c210e), to(#7cb07b));
   background: -webkit-linear-gradient(top, #0c210e, #7cb07b);
   background: -moz-linear-gradient(top, #0c210e, #7cb07b);
   background: -ms-linear-gradient(top, #0c210e, #7cb07b);
   background: -o-linear-gradient(top, #0c210e, #7cb07b);
   background-image: -ms-linear-gradient(top, #0c210e 0%, #7cb07b 100%);
   padding: 8px 16px;
   -webkit-border-radius: 14px;
   -moz-border-radius: 14px;
   border-radius: 14px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #000 0 1px 0;
   color: #39ff14;
   font-size: 14px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }

.button:hover {
  cursor: pointer;
   border: 1px solid #FFCC00;
   text-shadow: #000 0 1px 0;
   background: #7cb07b;
   background: -webkit-gradient(linear, left top, left bottom, from(#7cb07b), to(#0c210e));
   background: -webkit-linear-gradient(top, #7cb07b, #0c210e);
   background: -moz-linear-gradient(top, #7cb07b, #0c210e);
   background: -ms-linear-gradient(top, #7cb07b, #0c210e);
   background: -o-linear-gradient(top, #7cb07b, #0c210e);
   background-image: -ms-linear-gradient(top, #7cb07b 0%, #0c210e 100%);
   color: /* #eff2f1 */ #FFCC00;
}

.button:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0c210e;
   background: #000;
   background: -webkit-gradient(linear, left top, left bottom, from(#39ff14), to(#000);
   background: -webkit-linear-gradient(top, #39ff14, #000);
   background: -moz-linear-gradient(top, #39ff14, #000);
   background: -ms-linear-gradient(top, #39ff14, #000);
   background: -o-linear-gradient(top, #39ff14, #000);
   background-image: -ms-linear-gradient(top, #39ff14 0%, #000 100%);
   color: #000;
   }


/*--------------------- Armor Selection Styles ------------------------*/