@page {
	/* You can only change the size, margins, orphans, widows and page breaks here */

	/* Paper size and page orientation */
	size: letter portrait;

	/* Margin per single side of the page */
/* 	margin: .1in; */
}

html,
body {
  margin: auto;
  max-width: 8.5in;
  font-family: 'Nova Slim', cursive;
  font-size: .12in;
  background-color: #dddddd;
}

body {
  /* font-family: 'Righteous', cursive; */
  /* font-family: 'Fredoka One', cursive; */
  /* font-family: 'Special Elite', cursive; */
  /* font-family: 'Overlock', cursive; */
  /* font-family: 'Pompiere', cursive; */
  /* font-family: 'Quicksand', sans-serif; */
  /* font-family: 'Roboto Slab', serif; */
  /* font-family: 'Zilla Slab', serif; */
  /* font-family: 'Nova Slim', cursive; */
  /* font-family: 'Didact Gothic', sans-serif; */
}

label {
  margin-bottom: 0;
}

.dotRow {
  --dotSize: .2in;
  --barHeight: .04in;
  
  --colorBorder: #000000;
  --colorTextBought: #ffffff;
  --colorTextUnbought: #000000;
  --colorBackgroundBought: #0089ff;
  --colorBackgroundUnbought: #ebf6ff;
  --colorBackgroundCurrent: #0065bb;
  --colorBackgroundWriteIns: #ffffff;
  
  position: relative;
  display: flex;
  z-index: 0;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  font-size: calc(var(--dotSize)*.7);
  line-height: calc(var(--dotSize)*.7);
  font-weight: bold;
}

.dotRow>li {
  display: flex;
  align-items: center;
  justify-content: center;
  
  position: relative;
  
  width: var(--dotSize);
  height: var(--dotSize);
  
  margin: 0;
  
  text-align: center;
  border: .01in solid var(--colorBorder);
  border-radius: var(--dotSize);
  background-color: var(--colorBackgroundBought);
  color: var(--colorTextBought);
  
  transition: background-color 1s;
}

.dotRow>li::before{
  content: '';
  position: absolute;
/*   top: calc(var(--dotSize)/2 - var(--barHeight)/2); */
  left: calc(-1*var(--dotSize));
  width: calc(var(--dotSize)*1.5);
  height: var(--barHeight);
  background-color: var(--colorBackgroundBought);
  border: .01in solid var(--colorBorder);
  z-index: -1;
}

.dotRow.writeIns>li {
  background-color: var(--colorBackgroundWriteIns);
  border-radius: 0;
}

.dotRow.writeIns>li::before {
  background-color: var(--colorBackgroundWriteIns);
}

.dotRow>li:first-of-type::before,
.dotRow>span:first-of-type,
.dotRow>span:first-of-type::before {
  display: none;
}

.dotRow>.active {
  background-color: var(--colorBackgroundCurrent);
}

.dotRow>.active ~ li {
  background-color: var(--colorBackgroundUnbought);
  color: var(--colorTextUnbought);
}

.dotRow.writeIns>.active ~ li {
  background-color: var(--colorBackgroundWriteIns);
  color: var(--colorTextUnbought);
}

.dotRow>.active~li::before {
  background-color: var(--colorBackgroundUnbought);
}

.dotRow span {
  display: block;
  width: 100%;
  height: 100%;
  padding: 15% 0;
  opacity: 0;
  transition: opacity 1s;
}

.dotRow .active>span {
  opacity: 1;
}

#sectionDetails,
#sectionAttributes,
#sectionSkills,
#sectionTraits,
#sectionWeaponsFlaws{
  display: flex;
/*   flex-wrap: wrap; */
  justify-content: space-between;
  align-items: stretch;
}


.has-float-label input,
.has-float-label select,
.has-float-label textarea {
  margin-bottom: 0;
  padding-top: .1in;
  border-bottom: .01in solid #000000;
}

.characterSheetPage {
  height: 11in;
  width: 8.5in;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  margin: .25in auto;
  padding: .1in;
  background-color: #ffffff;
  
  page-break-after: always;
}

.characterSheetPage:last-child {
  page-break-after: avoid;
}

.characterSheetPage.notesPage {
  --notesFontSize: 0.15in;
  flex-direction: row;
}

.characterSheetPage.notesPage textarea {
  flex: 1;
  
/*   overflow: hidden; */
  border: none;
  outline: none;
  resize: none;
  
  font-size: var(--notesFontSize);
  line-height: var(--notesFontSize);
  
  background-image: linear-gradient(transparent .14in, #dddddd .01in);
  background-size: 100% var(--notesFontSize);
  background-attachment: local;
}

.characterSheetPage.notesPage textarea:first-child {
  margin-right: .25in;
}

.sectionHeader {
  /* margin-bottom: .05in; */
  display: flex;
  align-self: center;
  /* text-align: center; */
  font-weight: bold;
}

.sectionHeader:before,
.sectionHeader:after {
  content: "                              ";
  margin: 0 .05in;
  text-decoration-line: line-through;
  text-decoration-style: double;
  white-space: pre;
}

.pageHeader {
  font-size: .2in;
}

.blockLabel {
  margin-bottom: .05in;
  text-align: center;
  font-weight: bold;
}

/************************************
** Section - Character Details
************************************/
.detailsBlock {
	display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.detailsBlock>div {
  min-width: 2in;
}

#sectionDetails .has-float-label input {
  width: 100%;
}

/************************************
** Section - Attributes
************************************/
.attributesDetails {
  align-self: flex-end;
  padding-right: .125in;
  padding-bottom: .01in;
  margin-right: .125in;
  border-right: 1px solid black;
  line-height: .2in;
  font-weight: bold;
  text-align: right;
}

.attributesDetails>div {
  margin-top: .05in;
}

.attributesBlock {
/*   width: 2.5in; */
  flex: 1;
  padding: 0 .125in;
  /* border: .01in solid #00004d; */
}

.attributesBlock:first-of-type {
  padding-left: 0;
}

.attributesBlock:last-of-type {
  padding-right: 0;
}

.attributesRank {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .05in;
}

.attributesRank .dotRow {
  width: calc(var(--dotSize)*7);
}

.attributesName {
  margin-right: .05in;
}

/************************************
** Section - Skills
************************************/
.skillsBlock {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
/*   height: 4.1in; */
  padding: 0 .125in;
  /* border: .01in solid #00004d; */
}

.skillsBlock:first-of-type {
  padding-left: 0;
}

.skillsBlock:last-of-type {
  padding-right: 0;
}

.skillsSkillWrapper {
  margin-top: .05in;
}

.skillsRank {
  display: flex;
/*   margin-top: .02in; */
  justify-content: space-between;
  align-items: center;
}

.skillsRank .dotRow {
  width: calc(var(--dotSize)*7);
}

.skillsName {
  margin-right: .1in;
}

.skillsSpecialtiesInput {
  width: 100%;
  padding: 0;
  border: none;
  border-bottom: .01in solid #00004d;
/*   text-align: center; */
  font-size: .1in;
  line-height: .1in;
}

/************************************
** Section - Traits
************************************/
.traitsBlock {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
/*   width: 2.7in; */
/*   height: 2.25in; */
  padding: 0 .125in;
/*   border: .01in solid #00004d; */
}

.traitsBlock:first-of-type {
  padding-left: 0;
}

.traitsBlock:last-of-type {
  padding-right: 0;
}

/************
** Merits
************/
.traitsMerit {
  display: flex;
  justify-content: space-between;
}

.traitsMeritText {
  flex: 1;
  margin-right: .1in;
  border: none;
  border-bottom: .01in solid #00004d;
  font-size: .1in;
  line-height: .1in;
}

.traitsMerit .dotRow {
  --dotSize: .135in;
  width: calc(var(--dotSize)*7);
}

/************
** Health & Willpower
************/
.traitsHealth .dotRow {
  --dotSize: .135in;
  width: calc(var(--dotSize)*17.5);
  margin: 0 auto .05in auto;
}

.traitsWillpower .dotRow {
  --dotSize: .135in;
  width: calc(var(--dotSize)*14.5);
  margin: 0 auto .05in auto;
}

.traitsHealth .dotRow.writeIns,
.traitsWillpower .dotRow.writeIns {
  margin: 0 auto;
}

.traitsHealth .dotRow span,
.traitsWillpower .dotRow span {
  opacity: 1;
}

/************
** Advantages & XP
************/
.traitsAdvantages {
/*   margin-top: 11px; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#sectionTraits .has-float-label {
  width: 1.25in;
  margin-top: .05in;
}

#sectionTraits .has-float-label:last-child {
  width: 100%;
}

#sectionTraits .has-float-label input{
  width: 100%;
}

/************
** Morality
************/
.traitsMorality {
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-direction: column-reverse;
}

.traitsMorality>div {
  display: flex;
  justify-content: space-between;
  margin-top: .01in;
}

.traitsMorality .dotRow span {
  opacity: 1;
}

.traitsMorality .dotRow>li {
  background-color: var(--colorBackgroundUnbought);
  color: var(--colorTextUnbought);
}

.traitsMorality .dotRow>.active {
  background-color: var(--colorBackgroundCurrent);
  color: var(--colorTextBought);
}

.traitsMoralityText {
  flex: 1;
  margin-right: .1in;
  border: none;
  border-bottom: .01in solid #00004d;
  font-size: .1in;
  line-height: .1in;
}

/************
** Weapons & Equipment
************/
#sectionWeaponsFlaws {
/*   margin-top: 3px; */
}

.weaponsEquipmentBlock {
/*   width: 66.2%; */
/*   margin: 0 auto; */
/*   padding: 10px; */
/*   padding-bottom: 12px; */
/*   display: inline-block; */
/*   border: .01in solid #00004d; */
  display: flex;
  flex: 2;
  flex-direction: column;
  justify-content: space-between;
  
  padding: 0;
  padding-right: .125in;
}

.weaponsEquipmentStats {
  display: flex;
  font-size: .1in;
  line-height: .1in;
}



.weaponsEquipmentBlock .has-float-label {
/*   display: inline-block; */
}

.weaponsEquipmentBlock .has-float-label input {
  width: 100%;
}

.traitsWeaponName,
.traitsEquipmentName {
  flex: 5;
}

.traitsWeaponDiceMod,
.traitsWeaponRange,
.traitsEquipmentDurability,
.traitsEquipmentStructure {
  flex: 1.5;
}

.traitsWeaponClip,
.traitsWeaponSize,
.traitsEquipmentCost,
.traitsEquipmentSize {
  flex: 1;
}

/************
** Flaws & XP
************/
.flawsXpBlock {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  
  padding: 0;
  padding-left: .125in;
  
}

.flawsXpBlock div>input:last-child {
  margin-bottom: 2px;
}

.traitsFlawsText {
  width: 100%;
  border: none;
  border-bottom: .01in solid #00004d;
  font-size: .1in;
  line-height: .1in;
}

#xpNotesSection {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.xpSection {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: .125in;
}

.xpSection input {
  width: 100%;
}

.footnotes {
  flex: 1.5;
  padding-left: .125in;
  font-size: .1in;
  line-height: .1in;
  text-align: justify;
}

/************
** Menu
************/
#menuBar {
/*   position: fixed; */
/*   top: .1in;
  right: .1in;
  width: .1in; */
/*   height: 1in; */
  margin-top: .1in;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
/*   background-color: red; */
}