/* Flexbox */
.flexrow,
.sheet-flexrow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.flexrow.reverse {
  flex-direction: row-reverse;
}
.flexcol,
.sheet-flexcol { 
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.flexcol.reverse {
  flex-direction: column-reverse;
}
.flexrow > *,
.flexcol > *,
.sheet-flexrow > *,
.sheet-flexcol > * {
  flex: 1;
}
.flexcol.chflex0 > *,
.flexrow.chflex0 > * {
  flex: 0;
}

.flexrow > .flex0,
.flexcol > .flex0 {
  /* display: block; */
  flex: 0;
}
.flexrow > .flex1,
.flexcol > .flex1 {
  flex: 1;
}
.flexrow > .flex2,
.flexcol > .flex2 {
  flex: 2;
}
.flexrow > .flex3,
.flexcol > .flex3 {
  flex: 3;
}

.flexrow > .flex100,
.flexcol > .flex100 {
  flex: 0 0 100%;
}



.no-wrap {
  flex-wrap: nowrap;
}

.spaced {
  justify-content: space-between;
}
.space-around {
  justify-content: space-around;
}

.flexrow label {
  max-width: 50%;
}

/* /Flexbox */

/* Inputs  */
@media (min-width: 10px) {
  textarea {
    min-width: 90%;
    max-width: 90%;
    margin: 0 auto;
    flex: none!important;
  }
}
.gaia-sheet {
  min-width: 840px;
  background-color: white;
}

/* Inputs  */
@media (min-width: 10px) {
  .gaia-border {
    position: relative;
    /* border: 2px solid black; */
    /* overflow: hidden; */
    padding: 5px;
    box-shadow: inset 0px 0px 0px 2px black;
    align-content: center;
  }
  
  .section-left, .section-right {
    min-width: 406;
  }

  .section-left .gaia-border, .section-right .gaia-border {
    margin-bottom: 20px;
    padding: 10px;
  }
  .gaia-border > * {
    z-index: 2;
  }
  .gaia-border-corner-container {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .gaia-border-corner {
    position: absolute;
    background-color: white;
    border: 2px solid black;
    border-radius: 0px 0px 3px 0px;
    border-radius: 3px;
    width: 9px;
    height: 9px;
  }
  .gaia-border-corner.topleft {
    /* border-radius: 0px 0px 3px 0px; */
    top: -2px;
    left: -2px;
    border-top: none;
    border-left: none;
  }
  .gaia-border-corner.topright {
    /* border-radius: 0px 0px 0px 3px; */
    top: -2px;
    right: -2px;
    border-top: none;
    border-right: none;
  }
  .gaia-border-corner.botleft {
    /* border-radius: 0px 3px 0px 0px; */
    bottom: -2px;
    left: -2px;
    border-bottom: none;
    border-left: none;
  }
  .gaia-border-corner.botright {
    /* border-radius: 3px 0px 0px 0px; */
    bottom: -2px;
    right: -2px;
    border-bottom: none;
    border-right: none;
  }
  .gaia-character-info .form-group {
    max-width: fit-content;
  }
  .gaia-character-info .gaia-border input,
  .gaia-character-info .gaia-border input:focus,
  .gaia-character-info .gaia-border input:focus-visible {
    width: 170px;
    border: none;
    outline: none;
    z-index: 2;
    position: relative;
    margin: 0 10px;
  }
  .recurso:not(.exaustao) .gaia-border {
    border-left: none;
  }
  .gaia-border input { 
    max-height: 26px;
  }
}
/* SpellCircle */
@media (min-width: 10px) {
  .outer-circle, .inner-circle,
  .top-circle, .bot-circle, .right-circle, .left-circle,
  .diamond {
    border: 1px solid black;
    position: absolute;
    z-index: 5;
  }
  .outer-circle {
    width: 65px;
    height: 65px;
    border-radius: 50px;
    top: -20px;
  }
  .inner-circle {
    width: 55px;
    height: 55px;
    border-radius: 50px;
    top: -15px;
  }
  .diamond {
    width: 48px;
    height: 48px;
    top: -11px;
    transform: rotate(-45deg);
  }
  .top-circle, .bot-circle,
  .right-circle, .left-circle {
    border-radius: 50px;
    width: 10px;
    height: 10px;
  }
  .top-circle {
    top: -26px;
  }
  .bot-circle {
    bottom: -26px;
  }
  .right-circle {
    right: -16px;
    top: 7px;
  }
  .left-circle {
    left: -16px;
    top: 7px;
  }
  .recurso input {
    z-index: 6;
  }
  .recurso span.placeholder {
    z-index: 7;
  }
}
/* HOMUNCULARIUM  */
@media (min-width: 10px) {
  .tab-1 {
    display: block;
  }
  .tab-2 {
    display: none;
  }
  nav.sheet-nav:has(input.homuncularium:checked ) ~ .tab-1 {
/*    display: none;*/
  }
  nav.sheet-nav:has(input.homuncularium:checked ) ~ .tab-2 {
/*    display: block;*/
  }

  .homuncularium {
    display: none;
  }
  .gaia-sheet:has(input.homuncularium:checked ) .homuncularium {
    display: flex;
  }
  .gaia-sheet:has(input.homuncularium:checked ) .legado {
    display: none;
  }
}
/* Tabs  */
@media (min-width: 10px) {
  nav.sheet-nav-1 {
    max-height: 30px;
  }
  nav.sheet-nav-1 label {
    margin: none;
    padding: 5px;
    text-align: center;
  }
  nav.sheet-nav-1 label input {
    display: none;
  }

  nav.sheet-nav-1 label:has(input:checked) {
    background-color: #392b3e;
    color: white;
  }

  .secondary-tab {
    display: none;
    padding: 10px;
  }
  .secondary-tab h3 {
    max-height: 25px;
  }

  nav.sheet-nav-1:has(input.notas:checked ) ~ .secondary-tab.notas,
  nav.sheet-nav-1:has(input.inventario:checked ) ~ .secondary-tab.inventario,
  nav.sheet-nav-1:has(input.equipamento:checked ) ~ .secondary-tab.equipamento,
  nav.sheet-nav-1:has(input.habilidades:checked ) ~ .secondary-tab.habilidades {
    display: flex;
  }
}
/* /Tabs */
@media (min-width: 10px) {
  .header-middle {
    align-items: center;
  }
  .header-middle .gaia-dados-morte {
    width: 100%;
  }
  
  .header-middle .gaia-dados-morte .gaia-radio {
    flex: 0 0 16px;
  }
  .header-middle .gaia-dados-morte .separator {
    flex: 0 0 20px;
    height: 10px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
  }
}
.movimentacao {
  margin-right: 10px;
  max-width: 140px;
}
label.title {
  padding: 0;
  width: 100%;
  text-align: center;
  max-width: 100%;
}

.input-placeholder {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 27px;
}
.hiddenattr .input-placeholder,
.ability .input-placeholder {
  margin: 5px;
}
.ability input.item-name {
  width: 140px;
}
.ability input.item-name2 {
  max-width: 44%;
}

.input-placeholder span.placeholder {
  position: absolute;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  bottom: -65%;
  left: 50%;
  transform: scale(0.7) translate(-50%, -50%);
  transform: translate(-50%, -50%) scale(0.7);
  background-color: whitesmoke;
}

.exaustao, .recurso {
  height: 70px;
  flex: 0 0 230px;
  position: relative;
  padding-top: 15px;
  margin: 10px 0px 25px;
}
.exaustao {
  text-align: center;
  padding: 0;
}
.exaustao .recurso-nome {
  font-weight: bold;
  position: relative;
  top: -5px;
}
.exaustao .flexrow {
  width: 160px;
  height: 30px;
  margin: auto;
  flex: 0;
}
.exaustao .gaia-border{
  bottom: 5px;
}


.exaustao .gaia-border, .recurso .gaia-border {
  height: 35px;
}
.recurso .recurso-nome {
  float: right;
  position: absolute;
  top: -5px;
  right: 0;
  font-weight: bold;
  width: 140px;
}

.recurso .input-placeholder3 {
  position: relative;
  /*  flex: 1;*/
}

.recurso .input-placeholder3 input {
  min-width: 70px;
}

.recurso .input-placeholder3::after {
  position: absolute;
  content: attr(data-placeholder);
  pointer-events: none;
  bottom: -10;
  left: 35%;
  transform: scale(0.7) translate(-50%, 0%);
  background-color: whitesmoke;
}

/*.parametro-linha .parametros-extra .input-placeholder3*/
.input-placeholder3 {
  position: relative;
  flex: 0;
  min-height: 37px;
}

/*.parametro-linha .parametros-extra .input-placeholder3 input {*/
.input-placeholder3 input {
  min-width: 40px;
}

/*.parametro-linha .parametros-extra .input-placeholder3::after {*/
.input-placeholder3::after {
  position: absolute;
  content: attr(data-placeholder);
  pointer-events: none;
  bottom: 0;
  left: 35%;
  transform: scale(0.7) translate(-50%, 0%);
  background-color: whitesmoke;
}


.attb-list label {
  flex: 0 0 80px;
  font-size: 14px;
  padding-right: 5px;
}
.parametro-linha {
  position: relative;
  margin: 0;
  padding-top: 10px;
  border: 1px solid transparent;
  border-top: none;
  border-bottom: none;
}

.parametro-linha .parametros-extra {
  display: none;
  position: absolute;
  top: -2em;
  width: 100%;
  text-align: center;
  flex-flow: nowrap;
  z-index: 2;
  background-color: white;
  padding: 2px 0px;
  border: 1px solid black;
  border-bottom: none;
  z-index: 4;
  left: -1px;
/*  background-color: rgba(0, 0, 0, 0.5);*/
}
.parametro-linha .parametros-extra.iniciativa {
  bottom:-2.3em;
  top: unset;
  border: 1px solid black;
  border-top: none;
}
.parametro-linha:hover {
  border: 1px solid black;
  border-top: none;
  border-bottom: none;
}

/*.parametro-linha:first-of-type .parametros-extra,*/
.parametro-linha .parametros-extra:hover,
.parametro-linha:hover .parametros-extra {
  display: flex;
  justify-content: space-around;
}
.input-placeholder select {
  margin: 0;
}
select.aptidao {
  max-width: 80px;
  margin: 0 5px;
}
button {
  max-height: 24px;
}
button.roll-parametro {
  flex: 0 0 auto;
  min-width: 80px;
  max-width: 80px;
  height: 18px;
  font-size: 14px!important;
  margin: 0px 5px 0px 0px!important;
}

button.roll-parametro::before {
  display: none;
}

.rollbtn {
  flex: 0 0 11px;
  max-width: 18px;
  height: 18px;
  margin: 0px!important;
}

.number-field {
  flex: 0 0 2em;
  width: 3em;
  height: 28px!important;
  text-align: center;
}

.sheet-list-header-col,
.list-header-col {
  font-size: 10px;
  line-height: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}


input.gaia-radio {
  visibility: hidden;
}

input.gaia-radio::before {
  visibility: visible;
  content: '';
  display: inline-block;
  padding: 5px;
  border: 1px solid black;
  transform: rotate(-45deg);
  /*border-radius: 50%;*/
}
.exaustao .gaia-radio::before {
  padding: 8px;
}

input.gaia-radio.temporario::before {
  background-color: #22f3cc;
}

input.gaia-radio:has(~ :checked)::before,
input.gaia-radio:checked::before {
  background-color: #9c4bbf;
}

/* Item List */

.colbutton {
  opacity: 0!important;
  cursor: default!important;
}
.pda-value {
  flex: 0 0 30px;
  max-width: 30px;
  text-align: center;
}

.gaia-border-magic {
  display: flex;
  flex: 0 0 75px;
  /* margin-left: 5px; */
}
.recurso .gaia-border-magic::before {
  content: '';
  background: url(https://raw.githubusercontent.com/VHPaiva/roll20-character-sheets/master/Gaia/assets/recurso-max.png) no-repeat;
  background-size: contain;
  display: block;
  width: 120px;
  height: 120px;
  position: absolute;
  top: -40px;
  left: -30px;
}

.gaia-border-magic2 {
  background: url(https://raw.githubusercontent.com/VHPaiva/roll20-character-sheets/master/Gaia/assets/recurso-max.png) no-repeat;
  background-size: contain;
  width: 50%;
  position: absolute;
  height: 120px;
  top: -20px;
  left: -45px;
  z-index: 5;
}
.gaia-border-magic2 input {
  border: none;
  background-color: unset;
}
.recurso .gaia-border {
  position: absolute;
  width: 170px;
  width: 210px;
  right: 0;
}

.resource-max {
  flex: 0 0 50px;
  max-width: 50px;
  text-align: center;
  
}

.resource-value {
  flex: 0 0 40px;
  max-width: 40px;
  text-align: center;
}
.resource-temp {
  flex: 0 0 40px;
  max-width: 40px;
  text-align: center;
}
.sheet-item-name,
.item-name {
  flex: 0 0 120px;
  max-width: 120px;
}
.sheet-item-bonus,
.item-bonus {
  flex: 0 0 40px;
  max-width: 40px;
  text-align: center;
}
.sheet-item-param,
.item-param {
  flex: 0 0 100px;
  max-width: 100px;
  text-align: center;
}
.sheet-item-formula,
.item-formula {
  flex: 0 0 60px;
  max-width: 60px;
  text-align: center;
}

.sheet-item-header,
.item-header {
  flex: 0 0 110px;
  max-width: 110px;
  text-align: center;
}

.sheet-item-text,
.item-text {
  flex: 0 0 200px;
  max-width: 200px;
}
.sheet-item-rollformula,
.item-rollformula {
  flex: 0 0 95%;
  max-width: 95%;
  text-align: center;
}

.sheet-item-edit,
.item-edit {
  flex: 0 0 20px;
  width: 20px;
  max-width: 20px;
  visibility: hidden;
}

.sheet-controls {
  width: 0;
}

.sheet-controls::after {
  visibility: visible;
  font-family: Pictos;
  content: "y";
  font-size: 18px;
  vertical-align: middle;
  vertical-align: -webkit-baseline-middle;
}

.sheet-controls::after {
  opacity: .7;
}
.sheet-controls:checked::after {
  opacity: 1;
}

.sheet-controls.item-edit:checked + * {
  display: flex;
}
.sheet-controls.item-edit:not(:checked) + * {
  display: none;
}
/* /Item List */


/* Roll Template */

.sheet-rolltemplate-gaia-attack,
.sheet-rolltemplate-gaia-ability,
.sheet-rolltemplate-gaia-roll {
  border: 1px solid black;
  text-align: center;
  background-color: wheat;
  min-height: 5em;
  display: flex;
  flex-direction: column;
}
.sheet-rolltemplate-gaia-attack > * ,
.sheet-rolltemplate-gaia-ability > * ,
.sheet-rolltemplate-gaia-roll > *  {
  flex: 1;
}

.sheet-rolltemplate-gaia-attack .sheet-rolltemplate_header,
.sheet-rolltemplate-gaia-ability .sheet-rolltemplate_header,
.sheet-rolltemplate-gaia-roll .sheet-rolltemplate_header {
  font-size: 1.3em;
  line-height: 1.3em;
  color: black;
}

.sheet-rolltemplate-gaia-attack .sheet-rolltemplate_rolls ,
.sheet-rolltemplate-gaia-ability .sheet-rolltemplate_rolls ,
.sheet-rolltemplate-gaia-roll .sheet-rolltemplate_rolls {
  display: flex;
  justify-content: space-around;
  font-size: 1.5em;
  color: black;
}

.sheet-rolltemplate-gaia-attack .sheet-rolltemplate_rolls .inlinerollresult ,
.sheet-rolltemplate-gaia-ability .sheet-rolltemplate_rolls .inlinerollresult ,
.sheet-rolltemplate-gaia-roll .sheet-rolltemplate_rolls .inlinerollresult {
  font-size: 32px;
  line-height: 36px;
  display: block;
  color: white!important;
}

.sheet-rolltemplate-darkmode .inlinerollresult {
  color: white!important;
}

.sheet-rolltemplate-gaia-attack .sheet-rolltemplate_rolls .sheet-rolllabel {
  font-size: 14px;
  color: black;
}

.sheet-rolltemplate-gaia-attack .sheet-rolltemplate_propriedades,
.sheet-rolltemplate-gaia-ability .sheet-rolltemplate_propriedades,
.sheet-rolltemplate-gaia-roll .sheet-rolltemplate_propriedades {
  color: black;
  text-align: center;
  max-width: 90%;
  margin: auto;
}

.sheet-rolltemplate-gaia-attack .sheet-rolltemplate_extra,
.sheet-rolltemplate-gaia-ability .sheet-rolltemplate_extra,
.sheet-rolltemplate-gaia-roll .sheet-rolltemplate_extra {
  color: black;
  margin: 0 5px;
  text-align: justify;
}

.sheet-rolltemplate-gaia-roll .sheet-roll-result {
  display: flex;
}

/* /Roll Template */
.repcontainer  .hiddenattr {
  min-width: 300px;
}
.hiddenattr, 
.wip-border,
.sheet-section {
  position: relative;
  /* border: 1px solid blue; */
  /* padding: 10px 5px; */
  /* margin: 0 0 20px; */
}
.gaia-border .section-title,
.sheet-section .section-title {
  position: absolute;
  top: -15px;
  background-color: white;
  border: 2px solid black;
  padding: 0 5px;
  z-index: 1;
}