roll20-character-sheets/Arcanas&Ancestrais/arcanas.css

@import url('https://fonts.googleapis.com/css?family=Oldenburg|New+Rocker&display=swap');

.sheet-abafrente,
.sheet-abaverso {
	display: none;
}

/* show the selected tab */
.sheet-typetoggle[value="abafrente"] ~ div.sheet-abafrente,
.sheet-typetoggle[value="abaverso"] ~ div.sheet-abaverso {
	display: block;
}

.sheet-botao-selecao {
    font-family: 'New Rocker', cursive;
    text-align:center;
    font-size:1.3em;
    border-radius: 5px solid black;
    background-color: white;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 5px;
    color: black;
    background-color:white;
}

.sheet-main {
  width: 830px;
  height: 750px;
  font-family: 'Oldenburg', cursive;
}

.sheet-tab {
	margin-bottom: 15px;
	margin-top: 2px;
}

/* GRID setup */
.sheet-dados-frente {
  display: grid !important;
  width: 830px;
  height: 750px;
  font-family: 'Oldenburg', cursive;
  grid-gap: 0px;
  grid-template-columns: 165px 260px 405px;
  grid-template-rows: 70px 52px 90px 207px;
  grid-template-areas:"header       header      backstory    "
                      "stats        combat      backstory    "
                      "stats        combat      proficiencies"
                      "stats        combat      abilities    "
                      "weapons      weapons     abilities    ";
}

.sheet-dados-verso {
  display: grid !important;
  width: 830px;
  height: 750px;
  font-family: 'Oldenburg', cursive;
  grid-gap: 0px;
  grid-template-columns: 55% 45%;
  grid-template-rows: 80px 670px;
  grid-template-areas:"rewards      notes"
					  "equipaments  notes  ";
}

/* GRID sections */
.sheet-rewards {
	grid-area: rewards;
}

.sheet-rewards input {
	width: 	5.2em !important;
}
.sheet-equipaments {
  grid-area: equipaments;
}

.sheet-notes {
	grid-area: notes;
	max-width: 90%;
	width: 90%;
	margin-left: 15px;
}

.sheet-header {
  grid-area: header;
}

.sheet-main label {
	font-family: 'New Rocker', cursive;
}

.sheet-header input {
	max-width: 120px;
	margin-top: -5px;
}

.sheet-header input {
	border-bottom: 1px solid black;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    background: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    height: 18px;
}

.sheet-weapons {
  grid-area: weapons;
  margin-top: 125px;
}

.sheet-stats {
  grid-area: stats;
}

.sheet-stats label {
	font-size: 1.7em;
	font-family: 'New Rocker', cursive;
}

.sheet-stats-atributo {
	max-width: 40px;
	font-size: 1.3em;
}

.sheet-stats-mod {
	max-width: 25px;
}

.sheet-stats-content {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 30% 30% 20% 20%;
  grid-template-rows: 32px 32px 32px 32px 32px 32px;
  grid-template-areas:"for   for-value   for-mod   for-roll"
                      "des   des-value   des-mod   des-roll"
                      "con   con-value   con-mod   con-roll"
                      "int   int-value   int-mod   int-roll"
					  "sab   sab-value   sab-mod   sab-roll"
                      "car   car-value   car-mod   car-roll";
}

.sheet-stats-for {
	grid-area: for;
}

.sheet-stats-for-value {
	grid-area: for-value;
}

.sheet-stats-for-mod {
	grid-area: for-mod;
}

.sheet-stats-for-roll {
	grid-area: for-roll;
}

.sheet-stats-des {
	grid-area: des;
}

.sheet-stats-des-value {
	grid-area: des-value;
}

.sheet-stats-des-mod {
	grid-area: des-mod;
}

.sheet-stats-des-roll {
	grid-area: des-roll;
}

.sheet-stats-con {
	grid-area: con;
}

.sheet-stats-con-value {
	grid-area: con-value;
}

.sheet-stats-con-mod {
	grid-area: con-mod;
}

.sheet-stats-con-roll {
	grid-area: con-roll;
}

.sheet-stats-int {
	grid-area: int;
}

.sheet-stats-int-value {
	grid-area: int-value;
}

.sheet-stats-int-mod {
	grid-area: int-mod;
}

.sheet-stats-int-roll {
	grid-area: int-roll;
}

.sheet-stats-sab {
	grid-area: sab;
}

.sheet-stats-sab-value {
	grid-area: sab-value;
}

.sheet-stats-sab-mod {
	grid-area: sab-mod;
}

.sheet-stats-sab-roll {
	grid-area: sab-roll;
}

.sheet-stats-car {
	grid-area: car;
}

.sheet-stats-car-value {
	grid-area: car-value;
}

.sheet-stats-car-mod {
	grid-area: car-mod;
}

.sheet-stats-car-roll {
	grid-area: car-roll;
}

/* Chrome, Safari, Edge, Opera */
.sheet-abafrente input::-webkit-outer-spin-button,
.sheet-abafrente input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.sheet-abafrente input[type=number] {
  -moz-appearance: textfield;
}

.sheet-combat {
  grid-area: combat;
}

.sheet-combat label {
	font-family: 'New Rocker', cursive;
}

.sheet-combat textarea {
    font-size:0.7em;
}

.sheet-jogada-morte img{
	max-width: 8%;
}

.sheet-proficiencies {
  grid-area: proficiencies;
  margin-top:110px;
  margin-left: 10px;
}

.sheet-proficiencies textarea {
    max-width: 100%;
	width: 100%;
    max-height: 50px !important;
    margin-top: 5px;
    height:50px !important;
    font-size:0.7em;
}

.sheet-backstory {
  grid-area: backstory;
  margin-left: 10px;
}

.sheet-backstory textarea {
    max-width: 100%;
	width: 100%;
    max-height: 50px !important;
    margin-top: 5px;
    height:50px !important;
    font-size:0.7em;
}

.sheet-backstory label {
	font-family: 'New Rocker', cursive;
}

.sheet-backstory input {
	width: 98%;
}

.sheet-backstory-content {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 20% 80%;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas:"familia       familia-input "
                      "obsessao      obsessao-input"
                      "amigo         amigo-input   "
                      "inimigo       inimigo-input ";
}

.sheet-backstory-familia {
	grid-area: familia;
}

.sheet-backstory-familia-input {
	grid-area: familia-input;
}

.sheet-backstory-obsessao {
	grid-area: obsessao;
}

.sheet-backstory-obsessao-input {
	grid-area: obsessao-input;
}

.sheet-backstory-amigo {
	grid-area: amigo;
}

.sheet-backstory-amigo-input {
	grid-area: amigo-input;
}

.sheet-backstory-inimigo {
	grid-area: inimigo;
}

.sheet-backstory-inimigo-input {
	grid-area: inimigo-input;
}

.sheet-abilities {
  grid-area: abilities;
  margin-top:125px;
  margin-left: 10px;
}

.sheet-abilities-content {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 5% 95%;
  grid-template-rows: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
  grid-template-areas:"habilidade1-label        habilidade1-value "
                      "habilidade2-label        habilidade2-value "
                      "habilidade3-label        habilidade3-value "
                      "habilidade4-label        habilidade4-value "
					  "habilidade5-label        habilidade5-value "
                      "habilidade6-label        habilidade6-value "
                      "habilidade7-label        habilidade7-value "
                      "habilidade8-label        habilidade8-value "
					  "habilidade9-label        habilidade9-value "
                      "habilidade10-label       habilidade10-value ";
}

.sheet-habilidade1-label {
	grid-area: habilidade1-label;
}

.sheet-habilidade1-value {
	grid-area: habilidade1-value;
}

.sheet-habilidade2-label {
	grid-area: habilidade2-label;
}

.sheet-habilidade3-value {
	grid-area: habilidade3-value;
}

.sheet-habilidade4-label {
	grid-area: habilidade4-label;
}

.sheet-habilidade4-value {
	grid-area: habilidade4-value;
}

.sheet-habilidade5-label {
	grid-area: habilidade5-label;
}

.sheet-habilidade5-value {
	grid-area: habilidade5-value;
}

.sheet-habilidade6-label {
	grid-area: habilidade6-label;
}

.sheet-habilidade6-value {
	grid-area: habilidade6-value;
}

.sheet-habilidade6-value {
	grid-area: habilidade6-value;
}

.sheet-habilidade7-label {
	grid-area: habilidade7-label;
}

.sheet-habilidade7-value {
	grid-area: habilidade7-value;
}

.sheet-habilidade8-label {
	grid-area: habilidade8-label;
}

.sheet-habilidade8-value {
	grid-area: habilidade8-value;
}

.sheet-habilidade9-label {
	grid-area: habilidade9-label;
}

.sheet-habilidade9-value {
	grid-area: habilidade9-value;
}

.sheet-habilidade10-label {
	grid-area: habilidade10-label;
}

.sheet-habilidade10-value {
	grid-area: habilidade10-value;
}

.sheet-abilities-content input {
	max-width: 100%;
	width: 100%;
}

.sheet-abilities-content select {
	max-width: 87%;
	width: 87%;
	margin-bottom: 0px;
}

.sheet-up_atributo {
	font-family: 'Oldenburg', cursive !important;
	font-size: 1em;
	margin-bottom: 0px;
}

.sheet-rolltemplate-ataque,
.sheet-rolltemplate-atributo,
.sheet-rolltemplate-dado-uso {
    box-sizing:border-box;
    width:100%;
    position:relative;
    background-color:white;
    overflow:hidden;
	border-radius: 5px solid purple;
    background-color: white;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 5px;
}
.sheet-rolltemplate-ataque .sheet-rollbox-container,
.sheet-rolltemplate-atributo .sheet-rollbox-container,
.sheet-rolltemplate-dado-uso .sheet-rollbox-container {
    width:100%;
    position:relative;
    box-sizing:border-box;
    border:2px solid black
}
.sheet-rolltemplate-ataque .sheet-rollbox-container .sheet-rollbox{
    padding:5px;
    position:relative;
    width:100%;
    min-height:40px;
    display:grid;
    box-sizing:border-box;
    grid-template-columns:1fr 1px 1fr;
    column-gap:5px;
    row-gap:5px
}
.sheet-rolltemplate-atributo .sheet-rollbox-container .sheet-rollbox,
.sheet-rolltemplate-dado-uso .sheet-rollbox-container .sheet-rollbox{
    padding:5px;
    width:100%;
    box-sizing:border-box;
	text-align:center;
}
.sheet-rolltemplate-atributo .sheet-rollbox-container .sheet-rollbox-desempenho,
.sheet-rolltemplate-dado-uso .sheet-rollbox-container .sheet-rollbox-desempenho {
    padding:5px;
    font-family: 'Oldenburg', cursive;
    width:100%;
    box-sizing:border-box;
	margin-bottom:3px;
}
.sheet-rolltemplate-ataque .sheet-rollbox-container .sheet-rollbox .sheet-roll-title,
.sheet-rolltemplate-dado-uso .sheet-rollbox-container .sheet-rollbox .sheet-roll-title,
.sheet-rolltemplate-atributo .sheet-rollbox-container .sheet-rollbox .sheet-roll-title,
.sheet-rolltemplate-atributo .sheet-rollbox-container .sheet-rollbox-desempenho .sheet-roll-title{
    width:100%;
    grid-column:1/4;
    min-height:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    text-transform:uppercase
}
.sheet-rolltemplate-ataque .sheet-rollbox-container .sheet-rollbox .sheet-roll-label,
.sheet-rolltemplate-dado-uso .sheet-rollbox-container .sheet-rollbox .sheet-roll-label,
.sheet-rolltemplate-atributo .sheet-rollbox-container .sheet-rollbox .sheet-roll-label,
.sheet-rolltemplate-atributo .sheet-rollbox-container .sheet-rollbox-desempenho .sheet-roll-label{
    margin-top:5px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-weight:normal
}
.sheet-rolltemplate-ataque .sheet-rollbox-container .sheet-rollbox .sheet-roll,
.sheet-rolltemplate-dado-uso .sheet-rollbox-container .sheet-rollbox .sheet-roll,
.sheet-rolltemplate-atributo .sheet-rollbox-container .sheet-rollbox .sheet-roll,
.sheet-rolltemplate-atributo .sheet-rollbox-container .sheet-rollbox-desempenho .sheet-roll{
    padding-top:5px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center
}
.sheet-rolltemplate-ataque .sheet-rollbox-container .sheet-rollbox .sheet-roll span,
.sheet-rolltemplate-atributo .sheet-rollbox-container .sheet-rollbox .sheet-roll span,
.sheet-rolltemplate-dado-uso .sheet-rollbox-container .sheet-rollbox .sheet-roll span{
    margin:0 auto;
    padding:8px;
    font-size:18px
}
.sheet-rolltemplate-atributo .sheet-rollbox-container .sheet-rollbox-desempenho .sheet-roll span,
.sheet-rolltemplate-dado-uso .sheet-rollbox-container .sheet-rollbox-desempenho .sheet-roll span{
    margin-top:-9px;
    padding:8px;
    font-size:18px
}
.sheet-rolltemplate-ataque .sheet-rollbox-container .sheet-rollbox .sheet-divisor{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center
}
.sheet-rolltemplate-ataque .sheet-rollbox-container .sheet-rollbox .sheet-divisor span{
    width:1px;
    height:70%;
    background-color:green;
}

.sheet-rolltemplate-ataque .sheet-header,
.sheet-rolltemplate-atributo .sheet-header,
.sheet-rolltemplate-dado-uso .sheet-header{
    width: 100%;
    background-color: green;
    display: inline-block;
    text-align: center;
    color: white;
    position: relative;
    font-size: 1.3em;
}

.sheet-rolltemplate-ataque .sheet-left,
.sheet-rolltemplate-atributo .sheet-left,
.sheet-rolltemplate-dado-uso .sheet-left{
    margin-left: 5px;
}

.sheet-rolltemplate-ataque .sheet-rollbox-container .sheet-rollbox-ataque{
    padding:5px;
    width:100%;
    box-sizing:border-box;
	text-align:center;
}
.sheet-rolltemplate-ataque .sheet-rollbox-container .sheet-rollbox-ataque {
    padding:5px;
    font-family: 'Oldenburg', cursive;
    width:100%;
    box-sizing:border-box;
	margin-bottom:3px;
}
.sheet-rolltemplate-ataque .sheet-rollbox-container .sheet-rollbox-ataque .sheet-roll-label{
    margin-top:5px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-weight:normal
}
.sheet-rolltemplate-ataque .sheet-rollbox-container .sheet-rollbox-ataque .sheet-roll{
    padding-top:5px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center
}
.sheet-rolltemplate-ataque .sheet-rollbox-container .sheet-rollbox-ataque .sheet-roll span{
    margin:0 auto;
    padding:8px;
    font-size:18px
}

.sheet-size-70 {
	max-width: 70px !important;
}

.sheet-left-30 {
	margin-left: 30px !important;
}

.sheet-size-123 {
	max-width: 123px !important;
}

.sheet-ca-label {
	font-size: 1.7em !important;
	text-align:center !important;
}

.sheet-left-22 {
	margin-left:22px !important;
}

.sheet-ca-total {
	width: 40px !important;
	font-size:1.2em !important;
}

.sheet-size-30 {
	width: 30px !important;
}

.sheet-left-10 {
	margin-left:10px !important;
}

.sheet-top-6 {
	"margin-top:6px !important;
}

.sheet-left-5 {
	margin-left: 5px !important;
}

.sheet-left-80 {
	margin-left: 80px !important;
}

.sheet-pv {
	width: 50px !important;
	font-size: 1em !important;
	text-align: right !important;
}

.sheet-dv {
	width: 30px !important;
	font-size: 1em !important;
}

.sheet-top-5 {
	margin-top: 5px !important;
}

.sheet-size-205 {
	max-width:205px !important;
}

.sheet-height-18 {
	max-height:18px !important;
}

.sheet-height-17 {
	max-height:17px !important;
}

.sheet-height-15 {
	max-height:15px !important;
}

.sheet-font-normal {
	font-size: 1em !important;
}

.sheet-size-150 {
	max-width:150px !important;
}

.sheet-left-105 {
	margin-left:105px !important;
}

.sheet-left-35 {
	margin-left:35px !important;
}

.sheet-left-48 {
	margin-left:48px !important;
}

.sheet-left-50 {
	margin-left:50px !important;
}

.sheet-left-12 {
	margin-left:12px !important;
}

.sheet-left-10 {
	margin-left:10px !important;
}

.sheet-size-80 {
	width:80px !important;
	max-width:80px !important;
}

.sheet-font-menor {
	font-size: 0.7em !important;
}

.sheet-size-50 {
	width:50px !important;
	max-width:50px !important;
}

.sheet-size-53 {
	width:53px !important;
	max-width:53px !important;
}

.sheet-size-60 {
	max-width:60px !important;
}

.sheet-nivel {
	width: 3.5em !important;
}

.sheet-anotacoes {
	max-height:100% !important;
	height:100% !important;
}