@import url('https://fonts.googleapis.com/css?family=Pirata+One&display=swap');

main {
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 1fr 0.5fr 2fr;
    grid-template-rows: 60px auto auto 150px auto auto;
    grid-template-areas:"unit avatar  name"
                        "unit  avatar  class"
                        "unit  avatar  skill"
                        "unit  trait  trait"
                        "resources resources resources"
                        "act    act    act";
}

input[name=attr_type][value=necromancer] ~ main{
    grid-template-columns: 0.5fr 2fr;
    grid-template-rows: 60px auto auto 150px auto auto auto;
    grid-template-areas:"avatar  name"
                        "avatar  class"
                        "avatar  skill"
                        "trait   trait"
                        "resources resources"
                        "act     act"
                        "soul   soul";
}

section {
  padding: 0px;
  border-style: solid;
}

.f-col {
  display: flex;
  flex-direction: column;
}

.f-row {
  display: flex;
  flex-direction: row;
}

.wrap {
  display: flex;
  flex-wrap: wrap;
}

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

.f-center {
  align-items: center;
  justify-content: center;
}

.corner {
  position: absolute;
  margin: 3px;
  right: 34px;
}

.charsheet * {
  color:black;
}

.charsheet h3{
  text-align: center;
  font-family: "Pirata One";
  font-size: 20px;
  font-weight: normal;
}

.charsheet img{
  margin: auto;
}

.charsheet input[type="text"], select{
  padding: 0px;
}

.charsheet textarea{
  box-sizing: border-box;
}

.characterviewer .avatar {
  margin: 0px !important;
}

.ui-dialog .charsheet button[type=roll]::before {
  font-family: 'dicefontd6';
  content: "F";
}

.ui-dialog .charsheet button[type=roll] {
  margin: 2px;
  height: 22px;
  font-size: 1.5em;
  border: transparent;
  background: none;
  box-shadow: none;
}

.unit {
  grid-area: unit;
  background-color: black;
}

input[name=attr_type][value=necromancer] ~ .unit{
	display: none;
}

.avatar {
  grid-area: avatar;
  background-color: black;
}

.name {
  grid-area: name;
}

.name input {
	width:100%;
	background: transparent;
	border: none;
  font-family: "Pirata One";
	font-size: 35px;
	text-align: center;
  margin: auto;
}

input[name=attr_faction][value=faction] ~ .name input{
	color: black;
}

input[name=attr_faction][value=carcass] ~ .name input{
	color: #F20DAF;
}

input[name=attr_faction][value=goregrinders] ~ .name input{
	color: #FF7829;
}

input[name=attr_faction][value=gargamox] ~ .name input{
	color: #29FF3C;
}

input[name=attr_faction][value=deadsouls] ~ .name input{
	color: #91FFEF;
}

input[name=attr_faction][value=abhorrers] ~ .name input{
	color: #FAA639;
}

input[name=attr_faction][value=igorri] ~ .name input{
	color: #9F00FF;
}

input[name=attr_faction][value=custom] ~ .name input{
	color: red;
}


.class {
  grid-area: class;
}

.class select {
	border: none;
	font-size: 18px;
  text-align: center;
  margin: auto;
  width: 145px;
}

.skill {
  grid-area: skill;
  background-color: grey;
  justify-content: space-evenly;
}

.skill .f-col{
  margin: auto;
}
.skill h3{
  font-size: 27px;
}

.skill input {
	font-size: 20px;
	text-align: center;
  width: 40px;
  margin-bottom: 10px;
}

.traits {
  grid-area: trait;
  background-color: grey;
}

.traits textarea {
  height: 666px;
  resize: none;
}

.resources {
  grid-area: resources;
  background-color: black;
  justify-content: space-evenly;
}

input[name=attr_faction][value=faction] ~ .resources{
	display: none;
}

.resources h3{
  color: white;
  text-align: right;
  width: 121px;
}

.resources input{
  width: 40px;
  font-weight: bold;
  font-size: 15px;
  margin: 2px 4px;
  text-align: center;
}

.act {
  grid-area: act;
  background-color: grey;
}

.act select, .soul select {
  width: 40px;
  font-size: 14px;
  margin: 2px 4px;
}

.act input[name="attr_actname"] {
  width: 97%;
  font-weight: bold;
  font-size: 15px;
  margin: 2px 4px;
}

.act textarea, .soul textarea{
  height: auto;
  min-height: 46px;
  resize: vertical;
}

.act .repcontainer[data-groupname="repeating_act"]{
    padding-bottom: 0.2em;
}
  
.act .repcontainer[data-groupname="repeating_act"] .repitem{
    margin: 4px 0px;
}

.soul {
  display: none;
}

input[name=attr_type][value=necromancer] ~ .soul{
	display: flex;
  flex-direction: column;
  grid-area: soul;
  background-color: grey;
}

.soul span{
  margin: auto;
  font-size: 15px;
  font-weight: bold;
}

.soul input[name="attr_soulpoints"] {
  width: 40px;
  height: 28px;
  font-size: 14px;
  text-align: center;
}

.soul input[name="attr_soulname"] {
  width: 97%;
  font-weight: bold;
  font-size: 15px;
  margin: 2px 4px;
}

.soul input[name="attr_soulcost"] {
  font-size: 14px;
  text-align: center;
  margin: 2px 4px;
  width: 40px;
}

.soul .repcontainer[data-groupname="repeating_soul"]{
  padding-bottom: 0.2em;
  padding-top: 0.7em;
}

.soul .repcontainer[data-groupname="repeating_soul"] .repitem{
  margin: 4px 0px;
}

.sheet-rolltemplate-rolls .sheet-container {
  border: 3px solid black;
  border-radius: 3px;
}

.sheet-rolltemplate-rolls .sheet-header {
  background-color:black;
  color:#FFF;
  text-align: left;
  padding: 5px;
}

.sheet-rolltemplate-rolls .sheet-title {
  font-family: "Pirata One";
  font-size: 1.8em;
  line-height: 22px;
}

.sheet-rolltemplate-rolls .sheet-subtitle {
  font-size: 1em;
}

.sheet-rolltemplate-rolls .sheet-roll {
  text-align: center;
  font-size: 33px;
  font-family: "Pirata One";
}

.sheet-rolltemplate-rolls .inlinerollresult
{
    background-color: transparent !important;
    color: #000000;
    border: none !important;
}

.sheet-rolltemplate-rolls .sheet-content {
  display: flex;
  flex-direction: column;
  background: white;
  color: black;
  grid-template-columns: auto auto;
  line-height: 1.4em;
}

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

.sheet-rolltemplate-rolls .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-rolls .sheet-content :nth-child(4n) {
  background: white;
}