/******* LAYOUT ********/
main {
  width: 850px;
  display: flex;
}

main > section {
  width: 410px;
}

main > section:last-of-type {
  margin-left: 20px;
}

div.row {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

div.row > div.col2 {
  width: calc(50% - 5px);
  margin-left: 15px;
}

div.row > div.col2:last-of-type {
  margin-left: 25px;
}

div.row > div.col2 > .statLine,
div.row > div.col2 > .frameTitle {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

div.row > div.col2 > .statLine:not(:first-of-type),
div.row > div.col2 > .frameTitle:not(:first-of-type) {
  margin-top: 5px;
}

div.row > div.col2 > .statLine > div,
div.row > div.col2 > .frameTitle > div {
  width: fit-content;
}

footer {
  text-align: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: dotted 1px #bbb;
  color: #999;
}

/********** COMPONENTS **********/
details > summary:first-of-type {
  display: revert;
}

button[type="roll"],
button[type="action"] {
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  border-radius: 0px;
  margin: 0px;
  box-shadow: none;
  padding: 2px 3px;
}

button[type="roll"]:hover,
button[type="action"]:hover {
  background: none;
  font-weight: bold;
}

section textarea {
  width: calc(100% - 9px) !important;
  font-family: 'Patrick Hand';
  font-size: 13px;
  font-style: italic;
  border: none;
  border-left: dotted 1px #ccc;
  border-bottom: dotted 1px #ccc;
}

input[type="number"] {
  text-align: center;
  border-radius: 0px;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0px;
}

.repcontrol > button,
.itemcontrol > button {
  padding: 2px 5px;
  border-radius: 0px;
  font-size: .8em;
}

.sheet-rolltemplate-base,
.sheet-rolltemplate-attack,
.sheet-rolltemplate-defense,
.sheet-rolltemplate-anima {
  width: 100%;
  margin: 5px;
}

.sheet-rolltemplate-base .sheet-template-container,
.sheet-rolltemplate-attack .sheet-template-container,
.sheet-rolltemplate-defense .sheet-template-container,
.sheet-rolltemplate-anima .sheet-template-container {
  background-color: white;
  border: solid black 2px;
  padding: 2px;
  text-align: center;
}

.sheet-rolltemplate-base .sheet-template-container > .sheet-template-header,
.sheet-rolltemplate-attack .sheet-template-container > .sheet-template-header,
.sheet-rolltemplate-defense .sheet-template-container > .sheet-template-header,
.sheet-rolltemplate-anima .sheet-template-container > .sheet-template-header {
  background-color: black;
  color: white;
  padding: 5px;
  width: calc(100% - 10px);
  display: flex;
  flex-direction: column;
}

.sheet-rolltemplate-base .sheet-template-container > .sheet-template-header > .sheet-template-character,
.sheet-rolltemplate-attack .sheet-template-container > .sheet-template-header > .sheet-template-character,
.sheet-rolltemplate-defense .sheet-template-container > .sheet-template-header > .sheet-template-character,
.sheet-rolltemplate-anima .sheet-template-container > .sheet-template-header > .sheet-template-character {
  width: 100%;
  font-size: 1.1em;
  font-weight: bold;
}

.sheet-rolltemplate-base .sheet-template-container > .sheet-template-header > .sheet-template-equipment,
.sheet-rolltemplate-attack .sheet-template-container > .sheet-template-header > .sheet-template-equipment,
.sheet-rolltemplate-defense .sheet-template-container > .sheet-template-header > .sheet-template-equipment,
.sheet-rolltemplate-anima .sheet-template-container > .sheet-template-header > .sheet-template-equipment {
  font-size: .75em;
  font-style: italic;
}

.sheet-rolltemplate-base .sheet-template-container > .sheet-template-body,
.sheet-rolltemplate-attack .sheet-template-container > .sheet-template-body,
.sheet-rolltemplate-defense .sheet-template-container > .sheet-template-body,
.sheet-rolltemplate-anima .sheet-template-container > .sheet-template-body {
  border-left: solid black 1px;
  border-right: solid black 1px;
  border-bottom: solid black 1px;
  padding: 5px;
}

.sheet-rolltemplate-base .sheet-template-container > .sheet-template-body .inlinerollresult,
.sheet-rolltemplate-base .sheet-template-container > .sheet-template-body .inlinerollresult.fullfail,
.sheet-rolltemplate-base .sheet-template-container > .sheet-template-body .inlinerollresult.fullcrit,
.sheet-rolltemplate-attack .sheet-template-container > .sheet-template-body .inlinerollresult,
.sheet-rolltemplate-attack .sheet-template-container > .sheet-template-body .inlinerollresult.fullfail,
.sheet-rolltemplate-attack .sheet-template-container > .sheet-template-body .inlinerollresult.fullcrit,
.sheet-rolltemplate-defense .sheet-template-container > .sheet-template-body .inlinerollresult,
.sheet-rolltemplate-defense .sheet-template-container > .sheet-template-body .inlinerollresult.fullfail,
.sheet-rolltemplate-defense .sheet-template-container > .sheet-template-body .inlinerollresult.fullcrit,
.sheet-rolltemplate-anima .sheet-template-container > .sheet-template-body .inlinerollresult,
.sheet-rolltemplate-anima .sheet-template-container > .sheet-template-body .inlinerollresult.fullfail,
.sheet-rolltemplate-anima .sheet-template-container > .sheet-template-body .inlinerollresult.fullcrit {
  background-color: white;
  border: none;
  font-family: 'Patrick Hand';
  font-size: 14px;
  font-style: italic;
}

/*********** TYPOGRAPHY ***********/
h1 {
  text-align: center;
}

.statLine > span,
.frameTitle > span {
  font-variant: small-caps;
}

section:first-of-type h3:first-of-type {
  margin-top: 10px;
}

section:first-of-type textarea {
  height: 6em;
}

summary > input[type="text"] {
  line-height: 15px;
  font-family: 'Patrick Hand';
  padding: 2px 4px;
  width: calc(100% - 14px);
  border: none;
  border-bottom: 1px dotted #bbb;
}

details.capacite > textarea {
  height: 3em;
}

/********** PAGE PERSONNAGES ***********/
section:last-of-type > input[type="text"]:first-of-type {
  border: none;
  border-radius: 0px;
  border-bottom: dotted 1px #bbb;
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-top: 5px;
  margin-top: 5px;
  color: black;
}

div.frameTitle > span:first-of-type {
  padding-left: 4px;
}

div.statLine > div > input[type="number"] {
  border: solid black 1px;
}

div.frame {
  border: solid black 1px;
}

div.frame > .frameTitle > input[type="number"] {
  border: none;
  border-bottom: dotted #bbb 1px;
}

div.frame > textarea {
  border-bottom: none;
  border-radius: 0px;
  margin-bottom: 0px;
  height: 6em;
}

div.rptFrame > .frameTitle {
  border-bottom: double #999 1px;
}

div.rptFrame > .frameTitle > span:not(:first-of-type) {
  border-left: solid 1px #999;
  text-align: center;
}

div.rptFrame > .frameTitle > span:last-of-type {
  background-color: #999;
}

div.rptFrame > .repcontainer > .repitem {
  border-bottom: dotted 1px #bbb;
}

div.rptFrame > .repcontainer > .repitem > input {
  border: none;
  border-radius: 0px;
  margin: 0px;
  font-family: 'Patrick Hand';
  font-size: 12px;
  font-style: italic;
}

div.rptFrame > .repcontainer > .repitem > input:not(:first-of-type) {
  border-left: solid 1px #999;
  text-align: center;
}

div.rptFrame > .repcontainer > .repitem > button[type="roll"],
div.rptFrame > .repcontainer > .repitem > button[type="action"] {
  height: 22px;
  border-left: solid 1px #999;
  margin: 0px;
}

#weapons > .frameTitle > span:nth-of-type(1),
#armours > .frameTitle > span:nth-of-type(1) {
  width: calc(100% - 5px - 37px - 37px - 28px);
}

#weapons > .frameTitle > span:nth-of-type(2),
#weapons > .frameTitle > span:nth-of-type(3),
#armours > .frameTitle > span:nth-of-type(2),
#armours > .frameTitle > span:nth-of-type(3) {
  width: 33px;
}

#weapons > .frameTitle > span:nth-of-type(4),
#armours > .frameTitle > span:nth-of-type(4) {
  width: 26px;
}

#weapons > .repcontainer > .repitem > input:nth-of-type(1),
#armours > .repcontainer > .repitem > input:nth-of-type(1) {
  width: calc(100% - 2px - 28px - 37px - 37px);
}

#weapons > .repcontainer > .repitem > input:nth-of-type(2), #weapons > .repcontainer > .repitem > input:nth-of-type(3),
#armours > .repcontainer > .repitem > input:nth-of-type(2),
#armours > .repcontainer > .repitem > input:nth-of-type(3) {
  width: 33px;
}

#heal > .frameTitle > span:nth-of-type(1) {
  width: calc(100% - 5px - 20px - 32px - 32px - 28px);
}

#heal > .frameTitle > span:nth-of-type(2) {
  width: 18px;
}

#heal > .frameTitle > span:nth-of-type(3),
#heal > .frameTitle > span:nth-of-type(4) {
  width: 28px;
}

#heal > .frameTitle > span:nth-of-type(5) {
  width: 26px;
}

#heal > .repcontainer > .repitem > input:nth-of-type(1) {
  width: calc(100% - 3px - 28px - 32px - 32px - 20px);
}

#heal > .repcontainer > .repitem > input:nth-of-type(2) {
  width: 19px;
}

#heal > .repcontainer > .repitem > input:nth-of-type(3), #heal > .repcontainer > .repitem > input:nth-of-type(4) {
  width: 27px;
}

#heal button[type="action"]::before {
  font-family: 'Pictos';
  content: 'h';
}