/* change roll20 defaults */
 /* Style the header */

.charsheet div.sticky {
  position: sticky;
  top: 0;
  border: #000 1px solid;
  background-color: #FFF;
  z-index: 100;
} 

h1,h2,h3,h4 {
  text-align: center;
}
textarea { 
  resize: vertical;
  box-sizing: border-box;
  height: auto;
  padding: 0;
}

 input[type=text] {
  padding: 0;
}
.charsheet input[type=number].digit,
.charsheet input[type=text].digit{
  padding: 0;
  width: 2.5em;
}
.charsheet input[type=number]{
  padding: 0;
  width: 3em;
}

.charsheet label {
  display: contents
}
.charsheet .no-buttons .repcontrol button.repcontrol_edit, 
.charsheet .no-buttons .repcontrol button.repcontrol_add {
  display: none;
}
p {
  margin: 0;
}
.charsheet select{
  padding: 0;
  width:fit-content;
  margin: 0;
  height: auto;
}
textarea.textbox{
  resize:none;
}
textarea.inputarea { 
  resize: vertical;
  box-sizing: border-box;
  height: auto;
  padding: 0;
}
.font-d6{
  font-family: dicefontd6;
}

.charsheet .font-pictos{
  font-family: pictos;
}


.sheet-character {
  display: flex;
  flex-direction: column;
  border: 1pt solid black;
  background-color:cornsilk;
  border-radius: 15px;
}
.sheet-gear{
  display: flex;
  flex-direction: column;
  border: 1pt solid black;
  background-color:cornsilk;
  border-radius: 15px;
}
.sheet-admin{
  display: flex;
  flex-direction: column;
  border: 1pt solid black;
  background-color:cornsilk;
  border-radius: 15px;
}

.sheet-npcgear {
  display: flex;
  flex-direction: column;
  border: 1pt solid black;
  background-color:cornsilk;
  border-radius: 15px;
}
.sheet-npccharacter {
  display: flex;
  flex-direction: column;
  border: 1pt solid black;
  background-color:cornsilk;
  border-radius: 15px;
}
.sheet-creature {
  display: flex;
  flex-direction: column;
  border: 1pt solid black;
  background-color:cornsilk;
  border-radius: 15px;
}

 .background{
  width: 100%;
  display: flex; 
  flex-direction: row;
  border: 1pt solid black;
  border-radius: 15px;
}
 .char-image{
  display: flex;
  border: 1pt solid black;
  flex-direction: column;
  justify-content: left;
  width: 15em;
  background-color: antiquewhite;
  border-radius: 15px;
}
.sheet-character img.portrait {
  max-width: 15em;
  max-height: 15em;
}
 .background-info{
  background-color:beige;
  justify-content: right;
    border-radius: 15px;
    width: 100%;
}
 .background-info-upper{
  display: flex;
  flex-direction: column;
  width: auto;
}
 .info-upper-row{
  display: flex;
  border: 1pt solid black;
  border-radius: 15px;
  flex-direction: row;
  width: auto;
}
 .info-upper-row1{
  border: 1pt solid black;
  flex-direction: column;
  border-radius: 15px;
  width: 100%;
}

 .background-infolower{
  display: flex; 
  flex-direction: row;
  padding: 1px;
  justify-content: space-evenly;
}

.attributes{
  display: flex;
  width: auto;
  gap: 0.1em;
}
 .damage-box{
  width: 30%;
  display: flex;
  border: 1pt solid black;
  flex-direction: column;
  background-color:blanchedalmond;
  border-radius: 15px;
}
.attributes-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
 .attributes-box-rows{
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 0.1em;
}
.archetype{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  border: 1pt solid black;
  border-radius: 15px;
}

.charsheet input.archetype-toggle[value=1] ~div.archetype {
  display: none;
}
.charsheet input.archetype-toggle:checked ~div.archetype {
  display: none;
}
.play-info{
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 0.1em;
}
 .inventory{
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
.skills-misc{
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 0.1em;
}
 .skills{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  border: 1pt solid black;
  border-radius: 15px;
}
.trait-box{
  display: flex;
  flex-wrap: wrap;
  columns: 2;
  
}
.trait-item {
  display: flex;
  border-bottom: 1pt solid black;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-right: 0.5em;

}
.charsheet .ammo-box {
  float: right;

}
.charsheet input.sheet-ammunition-show:checked + .ammo-box {
    display: none;
}

div.infobox{
  border: 1pt solid black;
  display: flex; 
  flex-direction: column;
  width: 100%;
  border-radius: 15px;
}

input[type=text].full {
  padding: 0;
  width: fit-content;
}

input[type=text].emcalc { /*set the width of the input to the number of ems specified by - style="--index: 1;" */
  padding: 0;
  width: calc(100% + (var(--index,0) * 1em));
}

input[type=text].lvinfoused {
  padding: 0;
  width: calc(100% - 9em);
}
input[type=text].infoused {
  padding: 0;
  width: calc(100% - 6em);
}
input[type=text].used {
  padding: 0;
  width: calc(100% - 2em);
}
input[type=text].info {
  padding: 0;
  width: calc(100% - 2em);
}
input[type=text].info {
  padding: 0;
  width: calc(100% - 2em);
}
input[type=text].em13 {
  padding: 0;
  width: 13em;
}
input[type=text].em8 {
  padding: 0;
  width: 8em;
}


select.size{
  width: fit-content;
}
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}




/*Configure the tab buttons*/
.charsheet .sheet-character,
.charsheet .sheet-gear,
.charsheet .sheet-admin,
.charsheet .sheet-npcgear,
.charsheet .sheet-npccharacter,
.charsheet .sheet-creature{
  display: none;
}

/* show the selected tab */
.charsheet .sheet-tabstoggle[value="character"]~.sheet-character,
.charsheet .sheet-tabstoggle[value="gear"]~.sheet-gear,
.charsheet .sheet-tabstoggle[value="admin"]~.sheet-admin,
.charsheet .sheet-tabstoggle[value="npcgear"]~.sheet-npcgear,
.charsheet .sheet-tabstoggle[value="npccharacter"]~.sheet-npccharacter,
.charsheet .sheet-tabstoggle[value="creature"]~.sheet-creature{
  display: flex;
}

.charsheet .sheet-buttonstoggle:not([value="pc"]) ~.sheet-buttons-pc,
.charsheet .sheet-buttonstoggle:not([value="npc"])~.sheet-buttons-npc {
  display: none;
}

.charsheet .archetype-caretaker,
.charsheet .archetype-commander,
.charsheet .archetype-duelist,
.charsheet .archetype-fixer,
.charsheet .archetype-grunt,
.charsheet .archetype-pilot,
.charsheet .archetype-scout,
.charsheet .archetype-techie{
  display: none;
}
.charsheet .archetype-select[value="Caretaker"]~.archetype-caretaker,
.charsheet .archetype-select[value="Commander"]~.archetype-commander,
.charsheet .archetype-select[value="Duelist"]~.archetype-duelist,
.charsheet .archetype-select[value="Fixer"]~.archetype-fixer,
.charsheet .archetype-select[value="Grunt"]~.archetype-grunt,
.charsheet .archetype-select[value="Pilot"]~.archetype-pilot,
.charsheet .archetype-select[value="Scout"]~.archetype-scout,
.charsheet .archetype-select[value="Techie"]~.archetype-techie{
  display: flex;
  flex-direction: column;
}
.charsheet .archetype-default{
  display: flex;
  flex-direction: column;
}
.charsheet .archetype-select[value="Caretaker"]~.archetype-default,
.charsheet .archetype-select[value="Commander"]~.archetype-default,
.charsheet .archetype-select[value="Duelist"]~.archetype-default,
.charsheet .archetype-select[value="Fixer"]~.archetype-default,
.charsheet .archetype-select[value="Grunt"]~.archetype-default,
.charsheet .archetype-select[value="Pilot"]~.archetype-default,
.charsheet .archetype-select[value="Scout"]~.archetype-default,
.charsheet .archetype-select[value="Techie"]~.archetype-default{
  display: none;
}

.charsheet .archetype-rank-0{
  display: flex;
  flex-direction: row;
}

.charsheet .archetype-rank-1,
.charsheet .archetype-rank-2,
.charsheet .archetype-rank-3,
.charsheet .archetype-rank-4,
.charsheet .archetype-rank-5,
.charsheet .archetype-rank-6{
  display: none;
}

.charsheet .archetype-rank-select[value="1"]~.archetype-rank-1,
.charsheet .archetype-rank-select[value="2"]~.archetype-rank-1,
.charsheet .archetype-rank-select[value="3"]~.archetype-rank-1,
.charsheet .archetype-rank-select[value="4"]~.archetype-rank-1,
.charsheet .archetype-rank-select[value="5"]~.archetype-rank-1,
.charsheet .archetype-rank-select[value="6"]~.archetype-rank-1,
.charsheet .archetype-rank-select[value="2"]~.archetype-rank-2,
.charsheet .archetype-rank-select[value="3"]~.archetype-rank-2,
.charsheet .archetype-rank-select[value="4"]~.archetype-rank-2,
.charsheet .archetype-rank-select[value="5"]~.archetype-rank-2,
.charsheet .archetype-rank-select[value="6"]~.archetype-rank-2,
.charsheet .archetype-rank-select[value="3"]~.archetype-rank-3,
.charsheet .archetype-rank-select[value="4"]~.archetype-rank-3,
.charsheet .archetype-rank-select[value="5"]~.archetype-rank-3,
.charsheet .archetype-rank-select[value="6"]~.archetype-rank-3,
.charsheet .archetype-rank-select[value="4"]~.archetype-rank-4,
.charsheet .archetype-rank-select[value="5"]~.archetype-rank-4,
.charsheet .archetype-rank-select[value="6"]~.archetype-rank-4,
.charsheet .archetype-rank-select[value="5"]~.archetype-rank-5,
.charsheet .archetype-rank-select[value="6"]~.archetype-rank-5,
.charsheet .archetype-rank-select[value="6"]~.archetype-rank-6 
{
  display: flex;
  flex-direction: row;
}


.sheet-posture-stationary,
.sheet-posture-braced,
.sheet-posture-dugIn,
.sheet-posture-standard,
.sheet-posture-allOut,
.sheet-posture-topSpeed {
  display: none;
}
input[value="stationary"].sheet-posture~.sheet-posture-stationary,
input[value="braced"].sheet-posture~.sheet-posture-braced,
input[value="dugIn"].sheet-posture~.sheet-posture-dugIn,
input[value="standard"].sheet-posture~.sheet-posture-standard,
input[value="allOut"].sheet-posture~.sheet-posture-allOut,
input[value="topSpeed"].sheet-posture~.sheet-posture-topSpeed {
  display: contents;
}

[value="pc"].sheet-type ~span.sheet-npcshow {
  display: none;
}
[value="npc"].sheet-type ~span.sheet-npcshow {
  display: contents;
}



.charsheet input.sheet-toggle-show:not(:checked) ~ div.sheet-body,
.charsheet input.sheet-toggle-hide:checked ~ div.sheet-body {
    display: none;
}
.charsheet input.sheet-toggle-show-span:not(:checked) ~ span.sheet-body,
.charsheet input.sheet-toggle-hide-span:checked ~ span.sheet-body {
    display: none;
}


.charsheet .sheet-block-a,
.charsheet .sheet-block-switch:checked ~ .sheet-block-b {
  display: contents;
}

.charsheet .sheet-block-b,
.charsheet .sheet-block-switch:checked ~ .sheet-block-a {
  display: none;
}

/* Displays alternate info for frames */
.charsheet .no-frame,
.charsheet .frame-check:checked ~ .frame {
  display: contents;
}

.charsheet .frame,
.charsheet .frame-check:checked ~ .no-frame {
  display: none;
}

.charsheet .no-blitz,
.charsheet .blitz-check:checked ~ .blitz {
  display: contents;
}

.charsheet .blitz,
.charsheet .blitz-check:checked ~ .no-blitz {
  display: none;
}


input.sheet-skills-hide-check~.sheet-skills-hide{
  display: contents;
  font-weight: bold;
}

input[value="0"].sheet-skills-hide-check+.sheet-skills-hide{
  display: none;
}


input[value="0"].sheet-familiar~.sheet-familiar-skill:after{
  content: "";
}

input[value="1"].sheet-familiar:checked~.sheet-familiar-skill:after{
  font-weight: bold;
  content: "*";
}


/* Displays info for domains in skills */
.sheet-domains-0,
.sheet-domains-1,
.sheet-domains-2,
.sheet-domains-3 {
  display: none;
}

input[value="0"].sheet-domains~.sheet-domains-0,
input[value="1"].sheet-domains~.sheet-domains-1,
input[value="2"].sheet-domains~.sheet-domains-2,
input[value="3"].sheet-domains~.sheet-domains-3 {
  display: inline-block;
}

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

.withoutavatars .sheet-rolltemplate-custom {
  margin-left: -7px;
}

.sheet-rolltemplate-custom .sheet-container {
  border: 1px solid;
  /* by default, the border is the same color as the header. You can change this here, e.g. to black */
  border-color: var(--header-bg-color);
}

/* Header formatting - title and subtitle */
.sheet-rolltemplate-custom .sheet-header {
  background-color: var(--header-bg-color);
  /* change text-align to center to center the header text */
  text-align: left;
  color: var(--header-text-color);
  padding: 5px;
}

.sheet-rolltemplate-custom .sheet-title {
  font-size: 1.1em;
}

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

/* example colors */
.sheet-rolltemplate-custom .sheet-container {
  /* this is the default color */
  --header-bg-color: rgba(112, 32, 130, 1);
  --header-text-color: #FFF;
}

.sheet-rolltemplate-custom .sheet-container.sheet-color-red {
  --header-bg-color: #F00;
}

.sheet-rolltemplate-custom .sheet-container.sheet-color-green {
  --header-bg-color: #0F0;
  --header-text-color: #000;
}

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

/* Left column */
.sheet-rolltemplate-custom .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-custom .sheet-value {
  }
  */

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

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

.autoExpand {
  overflow: hidden; /* hides overflow that is caused by the span */
  position: relative; /* Allows the input's absolute positioning to be relative to this parent div */
  min-width: 50px; /* Whatever feels good to you, prevents a new span from collapsing to 0. */
  width: fit-content; /* Will fit the width to the contents without going outside itself or collapsing smaller than its content, though we will be using min-width in the case where there's no content. */
  height: 20px; /* Prevent the span from defining the height of the input container which can't be multiline */
}
.autoExpand span {
  visibility: hidden;
  font-size: 1em;
  padding: 0 8px; /* Matching my input's padding so that the widths are correct */
}
.autoExpand input {
  position: absolute; /* removes the input from the DOM flow, allowing the span to exist in the same space */
  width: 100%; /* Inputs match the width of the parent element as defined by the spans */
  font-size: 1em;
}

/* use to hide add and modify buttons by SECTIONNAME
div[data-groupname=repeating_SECTIONNAME].repcontrol {
  display:none;
}
*/

/* Diceroll template */
/* Custom Templates Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-diceroll {
  margin-left: -37px;
}

.withoutavatars .sheet-rolltemplate-diceroll {
  margin-left: -7px;
}

.sheet-rolltemplate-diceroll .sheet-container {
  border: 1px solid;
  /* by default, the border is the same color as the header. You can change this here, e.g. to black */
  border-color: var(--header-bg-color);
}

/* Header formatting - title and subtitle */
.sheet-rolltemplate-diceroll .sheet-header {
  background-color: var(--header-bg-color);
  /* change text-align to center to center the header text */
  text-align: left;
  color: var(--header-text-color);
  padding: 5px;
}

.sheet-rolltemplate-diceroll .sheet-title {
  font-size: 1.1em;
}

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

/* example colors */
.sheet-rolltemplate-diceroll .sheet-container {
  /* this is the default color */
  --header-bg-color: rgba(112, 32, 130, 1);
  --header-text-color: #FFF;
}

.sheet-rolltemplate-diceroll .sheet-container.sheet-color-red {
  --header-bg-color: #F00;
}

.sheet-rolltemplate-diceroll .sheet-container.sheet-color-green {
  --header-bg-color: #0F0;
  --header-text-color: #000;
}

/* Allprops part */
.sheet-rolltemplate-diceroll .sheet-content {
  display: grid;
  background: #FFF;
  color: #000;
  /* Header formatting - modify the column layout below */
  grid-template-columns: auto auto;
  /* Line height to match default roll template */
  line-height: 1.4em;
}
/* diceroll part */


.sheet-rolltemplate-diceroll .sheet-content>div {
  padding: 5px;
}

/* Left column */
.sheet-rolltemplate-diceroll .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-diceroll .sheet-value {
  }
  */

/* Make even-numbered rows grey but not .inline*/

.sheet-rolltemplate-diceroll .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-diceroll .sheet-content :nth-child(4n) {
  background: #EEE;
}



/* Description field */
.sheet-rolltemplate-diceroll .sheet-desc {
  grid-column: span 2;
  padding: 5px;
  text-align: center;
  background-color: #FFF;
  color: #000;
}


.sheet-rolltemplate-diceroll .sheet-hide {
  display: none;
}


/* WeaponDiceroll template */
/* Custom Templates Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-weapondiceroll {
  margin-left: -37px;
}

.withoutavatars .sheet-rolltemplate-weapondiceroll {
  margin-left: -7px;
}

.sheet-rolltemplate-weapondiceroll .sheet-container {
  border: 1px solid;
  /* by default, the border is the same color as the header. You can change this here, e.g. to black */
  border-color: var(--header-bg-color);
}

/* Header formatting - title and subtitle */
.sheet-rolltemplate-weapondiceroll .sheet-header {
  background-color: var(--header-bg-color);
  /* change text-align to center to center the header text */
  text-align: left;
  color: var(--header-text-color);
  padding: 5px;
}

.sheet-rolltemplate-weapondiceroll .sheet-title {
  font-size: 1.1em;
}

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

/* example colors */
.sheet-rolltemplate-weapondiceroll .sheet-container {
  /* this is the default color */
  --header-bg-color: rgba(112, 32, 130, 1);
  --header-text-color: #FFF;
}

.sheet-rolltemplate-weapondiceroll .sheet-container.sheet-color-red {
  --header-bg-color: #F00;
}

.sheet-rolltemplate-weapondiceroll .sheet-container.sheet-color-green {
  --header-bg-color: #0F0;
  --header-text-color: #000;
}

/* Allprops part */
.sheet-rolltemplate-weapondiceroll .sheet-content {
  display: grid;
  background: #FFF;
  color: #000;
  /* Header formatting - modify the column layout below */
  grid-template-columns: auto auto;
  /* Line height to match default roll template */
  line-height: 1.4em;
}
/* diceroll part */


.sheet-rolltemplate-weapondiceroll .sheet-content>div {
  padding: 5px;
}

/* Left column */
.sheet-rolltemplate-weapondiceroll .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-diceroll .sheet-value {
  }
  */

/* Make even-numbered rows grey but not .inline*/

.sheet-rolltemplate-weapondiceroll .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-weapondiceroll .sheet-content :nth-child(4n) {
  background: #EEE;
}



/* Description field */
.sheet-rolltemplate-weapondiceroll .sheet-desc {
  grid-column: span 2;
  padding: 5px;
  text-align: center;
  background-color: #FFF;
  color: #000;
}


.sheet-rolltemplate-weapondiceroll .sheet-hide {
  display: none;
}
.sheet-rolltemplate-weapondiceroll .sheet-traits {
  font-size: .9em;
  padding: 5px;
  text-align: left;
  background-color: #EEE;
  color: #000;
}