body{
  background-color: darkgray; 
  width: 100%;
  height: 800px;
  margin: 0;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}  

#wrapper{
  margin-top: 5%;
  display: flex;
  width: 60%;
  height: 100%;
  border-radius: 35px;
  padding: 30px;
  background-image: linear-gradient(rgb(13,12,11),rgb(11,10,12));
  box-shadow: 5px 5px 15px black, inset 0px 0px 20px rgba(96,96,96,.5);
}
 
#leftColumn{
  display: flex;
  flex-direction: column;
  width: 35%;
  padding: 10px;
  color: white;
  background-image: linear-gradient(rgb(22,21,25),rgb(26,25,23)); 
  border-radius: 15px;
  margin-right: 10px;
  box-shadow: inset 0px 0px 20px rgba(96,96,96,.5), 2px 2px 10px black;
}

.leftMenuColumn{
  background-image: linear-gradient(rgb(22,21,25),rgb(26,25,23)); 
  border-radius: 15px;
  box-shadow: inset 0px 0px 20px rgba(96,96,96,.5), 2px 2px 10px black;
}

#itemsDisplayTab1{
  display: none; 
}

#itemsDisplayTab2{
  display: none; 
}

#spellsDisplayTab1{
  display: none; 
}

#spellsDisplayTab2{
  display: none; 
}

#featsDisplayTab{
  display: none; 
}

#tabSelect{
  width: 100%;
}

#navMenu{
  color: gray;
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: 10px;
  align-items: center;
  justify-content: space-between;
}

.navMenuTab{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(13,12,11);
  padding: 5px;
  width: 20%;
  user-select: none;
  cursor: pointer;
  border-radius: 10px;
  -webkit-transition: .2s;
  transition: background-color: .2s;
  box-shadow: inset 2px 2px 10px black;
}

.navMenuTab:hover{
  background-color: rgb(52,50,46); 
}

.selectedTab{
  color: white;
  background-color: rgb(26,25,23); 
  box-shadow: inset 0px 0px 20px rgba(96,96,96,.5);
}

.listSegment{
  background-color: rgba(0,0,0,0.2);
  display: flex;
  flex-direction: row;
  margin:10px;
  align-items: center;
  padding: 3px;
  border-radius: 15px;
  box-shadow: inset 2px 2px 10px black;
  -webkit-transition: .2s;
  transition: background-color: .2s;
}

.attributeDisplay{
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(rgb(22,21,25),rgb(26,25,23)); 
  height: 100%;
  padding: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 75px;
  margin: 5px;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  box-shadow: 2px 2px 10px black, inset 0px 0px 20px rgba(96,96,96,.5);
  user-select: none;
  cursor: pointer;
}

.attributeValue{
  font-size: 24pt; 
  font-family: monospace;
}

.listDisplay{
  margin-top:2px;
  margin-bottom:2px;
  padding:2px;
  margin-left: 10px;
  user-select: none;
  cursor: pointer;
  -webkit-transition: .2s;
  transition: background-color: .2s;
}

.listDisplay:hover{
  background-color: rgba(128,128,128,0.5);
  border-radius: 5px;
}

.listDisplayNoHover{
  margin-top:2px;
  margin-bottom:2px;
  padding:2px;
  margin-left: 10px;
  user-select: none;
}

.listTitle{
  font-weight: bold;
  font-family: monospace;
  font-size: 14pt;
}

.inventoryWeaponDisplay{
  width: 80%;
}

.listDisplayInventory{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgb(26,25,23); 
  box-shadow: 2px 2px 10px black, inset 0px 0px 10px rgba(96,96,96,.5);
  padding: 5px;
  margin-top:2px;
  margin-bottom:2px;
  margin-left: 10px;
  border-radius: 5px;
  user-select: none;
  -webkit-transition: .2s;
  transition: background-color: .2s;
}

.weaponTitle,.weaponDamage{
  box-shadow: inset 2px 2px 10px black;
  border-radius: 5px;
  background-color: rgba(0,0,0,0.2); 
  padding:4px;
  user-select: none;
  cursor: pointer;
  -webkit-transition: .2s;
  transition: background-color: .2s;
}

.weaponTitle:hover,.weaponDamage:hover{
  background-color: rgba(128,128,128,0.5);
}

.spellInfo{
  user-select: none;
  cursor: pointer;
}

.spellInfo:hover{
  background-color: rgba(192,128,192,0.2); 
}

.equippedSet{
  background-color: rgba(214,176,55,0.4);
  border-radius: 5px;
}

.equippedSet:hover{
   background-color: rgba(214,176,55,0.6);
}

.nextPageButton:hover{
   background-color: rgba(128,128,128,0.2);
   cursor: pointer;
}

#rightColumn{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 65%;
}

#upperRight{
  height: 60%; 
  display: flex;
  flex-direction: row;
}

#rollDisplayWrapper{
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#rollDisplay{
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background-image: linear-gradient(rgb(22,21,25),rgb(26,25,23));
  box-shadow: 2px 2px 10px black, inset 0px 0px 20px rgba(96,96,96,.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#sliderDiv{
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 15px;
  background-image: linear-gradient(rgb(13,12,11),rgb(11,10,12));
  box-shadow: inset 2px 2px 10px black;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 10px;
  background: rgb(192,86,40);
  outline: none;
  border: 2px solid white;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  
}
    
.slider::-webkit-slider-thumb {
  width: 25px;
  height: 25px;
  background: rgb(192,86,40);
  border: 2px solid white;
  border-radius: 12px;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 25px;
  background: rgb(192,86,40);
  border: 2px solid white;
  cursor: pointer;
}

#rollBreakdown{
  color: white;
  width: 85%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 10px;
  padding: 10px;
  border-radius: 15px;
  background-image: linear-gradient(rgb(13,12,11),rgb(11,10,12));
  box-shadow: inset 2px 2px 10px black;
}

#diceImage{
  width: 90%;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(rgb(13,12,11),rgb(11,10,12));
  box-shadow: inset 2px 2px 10px black;
  border-radius: 15px;
}

#diceImg{
  width: 80%; 
  border-radius: 15px;
}

#playerWrapper{
  width: 60%;
}

#playerUpper{
  color:white;
  display: flex;
  flex-direction: row;
  height: 65%
}

#playerStats{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(rgb(22,21,25),rgb(26,25,23));
  box-shadow: 2px 2px 10px black, inset 0px 0px 20px rgba(96,96,96,.5);
  width: 50%;
  margin-left: 10px;
  border-radius: 15px;
}

#ac_ap_display{
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 65%;
}

.ac_ap_class{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 10px;
  user-select: none;
}

.ac_ap_box{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.2);
  box-shadow: inset 2px 2px 10px black;
  padding: 10px;
  margin-top:5px;
  border-radius: 10px;
}

.hitPointsDisplay{
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: 10px;
  border-radius: 15px;
  user-select: none;
  cursor: pointer;
}

.hitPointsBar{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.2); 
  box-shadow: inset 2px 2px 10px black;
  padding-top: 8px;
  padding-bottom:10px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 15px;
  font-size: 14pt;
  font-family: monospace;
  margin-top:5px;
}

#healthDisplay:hover{
  background-color: rgba(128,32,32,0.5);
}

#spiritDisplay:hover{
  background-color: rgba(32,32,128,0.5);
}

#playerIcon{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  border-radius: 15px;
  background: url(images/edgeward.png) no-repeat;
  background-size: cover;
  border: 5px solid rgb(26,25,23);
  box-shadow: 2px 2px 10px black, inset 2px 2px 10px black;
}

#portraitImg{
  border-radius: 15px;
  box-shadow: 2px 2px 10px black;
  box-sizing: border-box;
  max-width: 100%;
}

#playerLower{
  color:white;
  display: flex;
  flex-direction: row;
  height: 35%
}

#playerBio{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height:90%;
  color: white;
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  background-image: linear-gradient(rgb(22,21,25),rgb(26,25,23)); 
  border-radius: 15px;
  box-shadow: inset 0px 0px 20px rgba(96,96,96,.5), 2px 2px 10px black;
}

#characterDescription{
  padding: 15px;
  text-align: center;
}

#currentHP{
  color: red; 
}

#missingHP{
  color: black; 
}

#currentSP{
  color: blue; 
}

#missingSP{
  color: black; 
}

#lowerRight{
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background-image: linear-gradient(rgb(22,21,25),rgb(26,25,23));
  box-shadow: 2px 2px 10px black, inset 0px 0px 20px rgba(96,96,96,.5);
}

#navMenu2{
  color: gray;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.navMenuTab2{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(13,12,11);
  box-shadow: inset 2px 2px 10px black;
  border: 1px solid black;
  margin: 10px;
  padding: 10px;
  width: 20%;
  user-select: none;
  cursor: pointer;
  border-radius: 10px;
  -webkit-transition: .2s;
  transition: background-color: .2s;
}

.navMenuTab2:hover{
  background-color: rgb(52,50,46); 
}

.selectedTab2{
  color: white;
  background-color: rgb(26,25,23); 
  box-shadow: inset 2px 2px 10px rgba(128,128,128,.5);
}

#lowerRightDisplay{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80%;
}

.lowerRightMenu{
  display: flex;
  flex-direction: column;
  color: white;
  width: 100%;
  height: 100%;
  margin: 10px;
  border-radius: 15px;
  background-image: linear-gradient(rgb(13,12,11),rgb(11,10,12));
  box-shadow: inset 2px 2px 10px black;
  justify-content: center;
  align-items: center;
}

.lowerRightMenuRow{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50%;
}

.lowerRightMenuRowShort{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 33%;
}

.lowerRightMenuRowThin{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 85%;
  height: 50%;
}

.lowerRightMenuSegment{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px;
  padding: 5px;
  border-radius: 15px;
  width: 25%;
  height: 80%;
  background-color: rgb(26,25,23); 
  box-shadow: 2px 2px 10px black, inset 2px 2px 10px rgba(128,128,128,.5);
  user-select: none;
  cursor: pointer;
  -webkit-transition: .2s;
  transition: background-color: .2s;
}

.lowerRightMenuSegment:hover{
   background-color: rgb(52,50,46); 
}

.lowerRightDiceImage{
  max-width:60%; 
}

.potionWrapper{
  height: 100%;
  width: 100%;
  background-color: red;
  align-items: center;
  justify-content: center;
}

.potionLowerWrapper{
  height: 30%;
  width: 100%;
  background-color: green;
  display: flex;
  flex-direction: row;
}

.emptySpellSlot{
  background-image: linear-gradient(rgb(6,6,5),rgb(5,5,6));
  box-shadow: inset 2px 2px 10px black;   
}

#combatDisplayTab{
  display: none;
}

#potionsDisplayTab{
  display: none;
}

#movementDisplayTab{
  display: none;
}

#shopDisplayTab{
  display: none;
}