Files
roll20-character-sheets/3DX/3dx.css
T
Victor Ballogh dd1892f547 Add new rolls. Layout Rework. Problem fixes.
Added new rolls for evasion and luck, also added new styles for better consistency and fixed some layout problems. Added new inputs so players can better elaborate their character skills.
2025-06-23 17:21:08 -03:00

1495 lines
33 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, button, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: none;
font: inherit;
text-decoration: none;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
color: inherit;
}
textarea {
resize: none;
}
.characterviewer label {
font-weight: 600;
font-size: 12px;
margin-bottom: 0;
}
.largedialog label {
padding-right: 0rem;
text-align: center;
}
.largedialog textarea {
height: 100%;
padding-inline: 0.3rem;
width: calc(100% - 0.6rem);
}
.ui-dialog .charsheet input {
height: 100%;
}
.ui-dialog .charsheet {
padding: 0px;
}
input, textarea, select, .uneditable-input {
border-radius: 0px;
height: 100%;
line-height: 1;
margin-bottom: 0px;
padding: 0px;
width: 100%;
-webkit-border-radius: 0px;
}
label, input, button, select, textarea {
line-height: 1;
}
.ui-dialog .charsheet button[type="roll"], .ui-dialog .charsheet button[type="compendium"] {
align-items: center;
display: flex;
font-size: 1.1rem;
height: 100%;
}
.btn, .btn.btn-default {
box-shadow: none;
-webkit-box-shadow: none;
text-shadow: none;
}
.Tab__Display {
display: none;
}
.Radio__Personagem:checked ~ .Tab__Personagem, .Radio__Habilidades:checked ~ .Tab__Habilidades {
display: block;
}
.Root {
--background: #181818;
--backgroundbutton: #111111;
--boxbg: #383838;
--boxborder: #383838;
--fonttitle: #D0D0D0;
--fontsub: #a0a0a0;
--tabbgactive: #d8d8d8;
--tabtext: #050505;
--diceroll: #DCDCDC;
background: var(--background);
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.Hidden {
opacity: 0%;
}
.OpenSans {
color: var(--fonttitle);
font-family: "Open Sans";
font-size: 12px;
font-weight: 500;
letter-spacing: 0;
line-height: 0.9rem;
text-align: center;
}
#subtitle {
font-size: 0.55rem;
}
.charsheet .Tab__Display {
width: 100%;
}
.charsheet .Radio__Personagem, .charsheet .Radio__Habilidades {
display: none;
}
.charsheet .TabLabel__Personagem, .charsheet .TabLabel__Habilidades {
background-color: var(--boxborder);
border: solid thin var(--boxborder);
border-radius: 5px;
font-family: "Open Sans";
margin-top: 0.75rem;
padding-block: 0.3rem;
padding-inline: 1.25rem;
transition: 0.1s;
width: 2rem;
}
.charsheet .TabLabel__Personagem {
margin-left: 2%;
margin-right: 0.5rem;
}
.charsheet .TabLabel__Personagem:hover, .charsheet .TabLabel__Habilidades:hover {
filter: brightness(135%);
font-family: "Open Sans";
}
.charsheet input[type="radio"]:checked+label {
background-color: var(--tabbgactive);
color: var(--tabtext);
font-family: "Open Sans";
}
.charsheet .Iniciativa__Box {
align-items: center;
display: flex;
justify-content: center;
margin-left: calc(0.5rem - 6px);
margin-top: 1.5rem;
}
.Header {
display: flex;
justify-content: space-between;
margin-bottom: 1.5rem;
padding-inline: 2%;
width: 96%;
}
.Nivel_P__Section {
width: 4.5%;
}
.Nivel_P__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-radius: 10px;
flex-direction: column;
justify-content: center;
width: 100%;
}
.Nivel_P__Label {
background: var(--boxbg);
border-radius: 7px 7px 0 0;
padding-block: 0.3rem;
width: 100%;
}
.Nivel_P__Input {
background: none;
border: none;
padding-block: 0.3rem;
width: 100%;
}
.Column__Triple {
display: flex;
flex-direction: column;
width: 29.5%;
}
.Column__Double {
display: flex;
flex-direction: column;
width: 50%;
}
.Personagem__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-radius: 10px;
flex-direction: column;
justify-content: center;
width: 100%;
}
.Personagem__Label {
background: var(--boxbg);
border-radius: 7px 7px 0 0;
padding-block: 0.3rem;
width: 100%;
}
.Personagem__Input {
background: none;
border: none;
padding-block: 0.3rem;
width: 100%;
}
.Informacao__Wrap {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-radius: 10px;
justify-content: center;
width: 100%;
}
.Informacao__Box {
display: flex;
flex-direction: column;
width: 100%;
}
.Informacao__Label {
background: var(--boxbg);
padding-block: 0.3rem;
width: 100%;
}
.Informacao__Input {
background: none;
border: none;
padding-block: 0.3rem;
}
.Left__Label {
border-radius: 7px 0 0 0;
}
.Right__Label {
border-radius: 0 7px 0 0;
}
.Middle__Input {
border-left: solid thin var(--boxborder);
border-right: solid thin var(--boxborder)
}
.Jogador__Wrap {
align-items: center;
display: flex;
justify-content: center;
width: 100%;
}
.Jogador__Box {
display: flex;
border: solid thin var(--boxborder);
border-radius: 10px;
flex-direction: column;
width: 100%;
}
.Jogador__Label {
background: var(--boxbg);
border-radius: 7px 7px 0 0;
padding-block: 0.3rem;
width: 100%;
}
.Jogador__Input {
background: none;
border: none;
padding-block: 0.3rem;
width: 100%;
}
.Logo__3DX {
align-items: center;
background: var(--boxbg);
border-radius: 10px;
font-family: "open sans";
font-weight: 700;
color: var(--fonttitle);
display: flex;
height: 100%;
justify-content: center;
margin-left: 6%;
width: 4.5rem;
}
.Description {
display: flex;
justify-content: space-between;
margin-bottom: 1.5rem;
padding-inline: 2%;
width: 96%;
}
.Column__Double:first-child {
padding-right: 1.5rem;
}
.DescriptionL__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-bottom: none;
flex-direction: column;
justify-content: flex-start;
width: 100%;
}
.DescriptionL__Label {
background: var(--boxbg);
padding-block: 0.3rem;
width: 100%;
}
.DescriptionL__Textarea {
background: none;
border: none;
padding-block: 0.3rem;
text-align: start;
width: 100%;
}
.DescriptionL__Correction_Padding {
padding-bottom: 0.84rem;
}
.DescriptionR__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-bottom: none;
flex-direction: column;
justify-content: flex-start;
width: calc(100% - 2px);
}
.DescriptionR__Label {
background: var(--boxbg);
padding-block: 0.3rem;
width: 100%;
}
.DescriptionR__Textarea {
background: none;
border: none;
padding-block: 0.3rem;
text-align: start;
width: 100%;
}
.First__Box {
border-radius: 10px 10px 0 0;
}
.Last__Box {
border-bottom: solid thin var(--boxborder);
border-radius: 0 0 10px 10px;
}
.First__Label {
border-radius: 7px 7px 0 0;
}
.Origem__Wrap {
display: flex;
}
.Origem__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-bottom: none;
flex-direction: column;
justify-content: flex-start;
width: 100%;
}
.Origem__Label {
background: var(--boxbg);
padding-block: 0.3rem;
width: 100%;
}
.Origem__Textarea {
background: none;
border: none;
padding-block: 0.3rem;
text-align: start;
width: 100%;
}
.Origem__Box--Left {
border-radius: 10px 0 0 0;
border-right: none;
}
.Origem__Box--Right {
border-radius: 0 10px 0 0;
border-left: none;
}
.Origem__Textarea--Left {
border-right: solid thin var(--boxborder);
}
.Origem__Textarea--Right {
width: calc(100% - 12px);
}
.Origem__Label--Left {
border-radius: 7px 0 0 0;
}
.Origem__Label--Right {
border-radius: 0 7px 0 0;
}
.Resize {
height: 100%;
}
.Gameplay {
display: flex;
padding-bottom: 1.5rem;
padding-inline: 2%;
width: 96%;
}
.Gameplay__Wrap {
display: flex;
flex-direction: column;
width: 75%
}
.GameplayUpper__Wrap {
display: flex;
justify-content: space-between;
padding-right: 2.5%;
margin-bottom: 1.5rem;
}
.GameplayUpper__Wrap--Left {
display: flex;
border-top: solid thin var(--boxborder);
border-radius: 10px;
flex-direction: column;
width: 42%;
}
.Status__Wrap {
border-left: solid thin var(--boxborder);
border-right: solid thin var(--boxborder);
border-radius: 10px 10px 0 0;
display: flex;
}
.Status__Box {
display: flex;
flex-direction: column;
width: 50%;
}
.Status__Label {
background: var(--boxbg);
padding-block: 0.3rem;
}
.StatusDesc__Wrap {
display: flex;
border-right: solid thin var(--boxborder);
width: 100%;
}
.Status__Description {
align-items: center;
color: var(--fontsub);
display: flex;
font-size: 0.7rem;
justify-content: center;
padding-block: 0.5rem;
}
.Status__Input {
background: none;
border: none;
font-size: 14px;
padding-block: 0.5rem;
}
.Status__Box--Left {
border-right: solid thin var(--boxborder);
}
.RD__Resize--Width {
width: 20%;
}
.Complicacoes__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-radius: 0 0 10px 10px;
flex-direction: column;
justify-content: center;
width: calc(100% - 2px);
}
.Complicacoes__Label {
background: var(--boxbg);
padding-block: 0.3rem;
width: 100%;
}
.Complicacoes__Textarea {
background: none;
border: none;
height: 100%;
padding-block: 0.3rem;
text-align: start;
width: calc(100% - 4px);
}
.Armas__Wrap {
display: flex;
border: solid thin var(--boxborder);
border-radius: 10px;;
flex-direction: column;
width: 55%;
}
.Armas__Label {
background: var(--boxbg);
border-radius: 7px 7px 0 0;
padding-block: 0.3rem;
width: 100%;
}
.Armas__Section {
display: flex;
justify-content: space-between;
height: 100%;
margin-bottom: 0.5rem;
padding-inline: 1rem;
width: calc(100% - 2rem);
}
.Armas__Coluna {
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
}
.ArmasBotao {
width: 2%;
}
.ArmasNome {
width: 54%;
}
.ArmasDano {
width: 20%;
}
.ArmasQuant {
width: 15%;
}
.Armas__Description {
align-items: center;
color: var(--fontsub);
display: flex;
font-size: 0.7rem;
justify-content: center;
padding-block: 0.5rem;
}
.Armas__Button:first-child {
margin-top: 1.7rem;
}
.Armas__Input {
background: none;
border: none;
border-bottom: solid thin var(--boxborder);
display: flex;
padding-block: 0.2rem;
width: calc(100% - 1px);
}
.Armas__Button {
align-content: center;
border: none;
display: flex;
justify-content: center;
padding-bottom: 0.2rem;
height: 100%;
width: 1rem;
}
.GameplayLower__Wrap {
display: flex;
height: 100%;
}
.Proficiencias__Box {
align-items: center;
border: solid thin var(--boxborder);
border-radius: 10px;
display: flex;
flex-direction: column;
width: 65%;
}
.Proficiencias__Title {
background: var(--boxbg);
border-radius: 7px 7px 0 0;
padding-block: 0.3rem;
width: 100%;
}
.ProficienciasColumns__Wrap {
display: flex;
height: 95%;
width: 95%;
}
.Proficiencias__Wrap__L {
display: flex;
width: 50%;
margin-bottom: 0.6rem
}
.Proficiencias__Wrap__R {
display: flex;
flex-direction: column;
margin-bottom: 0.6rem;
width: 50%;
}
.Proficiencias__Wrap__Especial {
display: flex;
justify-content: space-evenly;
padding-block: calc(0.7rem - 2px);
padding-left: -3px;
width: 100%;
}
.Proficiencias__Wrap_Column {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
}
.Proficiencias__Column {
align-items: center;
display: flex;
flex-direction: column;
margin-right: 0.5rem;
width: 100%;
}
.Proficiencias__Column--Right {
margin-right: 0.4rem;
}
.Proficiencias__Label {
align-items: center;
color: var(--fontsub);
display: flex;
font-size: 0.7rem;
justify-content: center;
padding-block: 0.7rem;
width: 100%;
}
.Proficiencias__Especial {
width: 100%;
}
.ProficienciasBotao {
width: 5%;
}
.ProficienciasNivel {
width: 20%;
}
.ProficienciasNome {
width: 75%;
}
.Proficiencias__Input {
background: none;
border: none;
border-bottom: solid thin var(--boxborder);
display: flex;
width: calc(100% - 1px);
}
.Proficiencias__Button {
align-content: center;
border: none;
display: flex;
justify-content: center;
padding-bottom: 0.2rem;
height: 100%;
width: 1rem;
}
.Proficiencias_Pontos_Totais {
align-items: center;
display: flex;
}
.Inventory__Wrap {
align-items: center;
display: flex;
flex-direction: column;
padding-inline: 2.5%;
width: 35%;
}
.Inventory__Box {
align-items: center;
border: solid thin var(--boxborder);
border-bottom: none;
display: flex;
flex-direction: column;
height: 100%;
padding-bottom: 0.1rem;
width: 100%;
}
.Inventory__Label {
background: var(--boxbg);
border-radius: 7px 7px 0 0;
padding-block: 0.3rem;
width: 100%;
}
.Inventory__Textarea {
background: none;
border: none;
padding-bottom: 0.2rem;
padding-top: 0.3rem;
text-align: start;
width: 100%;
}
.Square__Label {
border-radius: 0;
}
.Bottom__Line {
border-bottom: solid thin var(--boxborder);
}
.Resource__Wrap {
display: flex;
justify-content: center;
margin-bottom: 0.5rem;
width: 90%;
}
.Resource__Column {
align-items: center;
display: flex;
flex-direction: column;
}
.Resource__Label {
align-items: center;
color: var(--fontsub);
display: flex;
font-size: 0.7rem;
justify-content: center;
padding-block: 0.7rem;
width: 100%;
}
.Resource__Input {
background: none;
border: none;
border-bottom: solid thin var(--boxborder);
display: flex;
padding-block: 0.2rem;
width: calc(100% - 1px);
}
.Resource__Button {
align-content: center;
border: none;
display: flex;
justify-content: center;
padding-bottom: 0.2rem;
height: 100%;
width: 1rem;
}
.ResourceButton {
width: 5%;
}
.ResourceNome {
margin-left: 1.0rem;
margin-right: 0.5rem;
width: calc(75% - 1.5rem);
}
.ResourceQuant {
width: 20%;
}
.QuantInner__Column {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
width: 100%;
}
.Habilidades__Section {
display: flex;
flex-direction: column;
width: 25%;
}
.Habilidades__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-radius: 10px 10px 0px 0px;
flex-direction: column;
justify-content: flex-start;
width: 100%
}
.Habilidades__Label {
background: var(--boxbg);
border-radius: 7px 7px 0px 0px;
padding-block: 0.3rem;
width: 100%;
}
.Habilidades__Input {
background: none;
border: none;
padding-block: 0.3rem;
width: 100%;
}
.Beneficios__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-radius: 0px 0px 10px 10px;
flex-direction: column;
height: 100%;
justify-content: flex-start;
width: 100%
}
.Beneficios__Label {
background: var(--boxbg);
padding-block: 0.3rem;
width: 100%;
}
.Beneficios__Input {
background: none;
border: none;
padding-block: 0.3rem;
width: 100%;
}
.LeftAlign {
text-align: left;
}
#suminput {
background-color: transparent;
border: none;
font-family: "Open Sans";
font-weight: 600;
padding-bottom: 0.4rem;
padding-left: 0.3rem;
text-align: left;
}
.Rolagens__Wrap {
align-items: center;
display: flex;
justify-content: space-evenly;
margin-block: 1.5rem;
padding-inline: 30%;
width: 65%;
}
.Rolagens__Box {
align-items: center;
display: flex;
justify-content: center;
}
.Rolagens__Button {
margin-right: 0.5rem;
}
.Rolagens__Label {
font-size: 1.5rem;
}
.charsheet .Tab__Habilidades {
padding-inline: 2%;
}
.charsheet .HabilidadesCard__Aviso{
padding-bottom: 1.5rem;
}
.charsheet .HabilidadesCard__Column {
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.charsheet .HabilidadesCard__Div {
align-items: center;
border: solid thin var(--boxborder);
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
width: 48.5%;
}
.charsheet .HabilidadesCard__Button {
background: none;
border: none;
}
.charsheet .HabilidadesCard__Button--Text {
color: var(--fontsub);
margin-left: 0.3rem;
}
.charsheet .HabilidadesCard__Button:hover {
background: var(--tabbgactive);
}
.charsheet .HabilidadesCard__Nome {
background: var(--boxbg);
border: none;
border-radius: 7px 7px 0px 0px;
margin-bottom: 0.5rem;
padding-block: 0.3rem;
}
.charsheet .HabilidadesCard__Wrapper {
display: flex;
flex-direction: column;
padding-block: 0.3rem;
width: 100%;
}
.charsheet .HabilidadesCard__Atributo {
display: flex;
padding-block: 0.2rem;
width: 100%;
}
.charsheet .HabilidadesCard__Label {
text-align: left;
margin-left: 3%;
padding-block: 0.3rem;
width: 22%;
}
.charsheet .HabilidadesCard__Input {
background: var(--boxbg);
border: none;
border-radius: 5px;
box-sizing: border-box;
margin-right: 3%;
padding-inline: 0.3rem;
padding-block: 0.3rem;
text-align: left;
width: 75%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.charsheet .HabilidadesCard__Input2 {
background: var(--boxbg);
border: none;
border-radius: 5px;
box-sizing: border-box;
margin-right: 4%;
padding-inline: 0.3rem;
padding-block: 0.3rem;
text-align: left;
width: 25%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.charsheet .HabilidadesCard__InputWrapper {
display: flex;
width: 78%
}
.sheet-rolltemplate-3dxdano {
padding-block: 1rem;
}
.sheet-rolltemplate-3dxdano div.sheet-roll-container {
align-items: center;
background: #181818;
border-radius: 10px;
border: 0.2rem solid #484848;
display: flex;
flex-direction: column;
width: 100%;
}
.sheet-rolltemplate-3dxdano div.sheet-roll-container span.sheet-roll-namepdj {
background: #383838;
border-radius: 7px 7px 0px 0px;
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.4rem;
font-weight: 600;
line-height: 100%;
padding-block: 0.6rem;
text-align: center;
width: 100%;
}
.sheet-rolltemplate-3dxdano div.sheet-roll-container div.sheet-roll-wrap {
align-items: center;
display: flex;
justify-content: center;
padding-top: 1.9rem;
padding-bottom: 1.55rem;
width: 100%;
}
.sheet-rolltemplate-3dxdano div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-dano {
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.3rem;
font-weight: 600;
margin-right: 0.75rem;
}
.sheet-rolltemplate-3dxdano div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-macroresult span {
background-color: #E8E8E8;
border: none;
border-radius: 4px;
color: #000000;
font-family: "Open Sans";
font-size: 1.8rem;
font-weight: 500;
padding-block: 0.1rem;
padding-inline: 0.5rem;
}
.sheet-rolltemplate-3dxdano div.sheet-roll-container div.sheet-roll-wrapaction {
align-items: center;
border-top: 0.1rem solid #383838;
display: flex;
justify-content: center;
padding-top: 0.5rem;
padding-bottom: 0.6rem;
width: 100%;
}
.sheet-rolltemplate-3dxdano div.sheet-roll-container div.sheet-roll-wrapaction span.sheet-roll-actionname {
color: #A9A9A9;
font-family: "Open Sans";
font-size: 1.2rem;
font-weight: 600;
margin-right: 0.4rem;
}
.sheet-rolltemplate-3dxdano div.sheet-roll-container div.sheet-roll-wrapaction span.sheet-roll-dicename {
color: #A9A9A9;
font-family: "Open Sans";
font-size: 1.2rem;
font-weight: 600;
}
.sheet-rolltemplate-3dxproficiencia {
padding-block: 1rem;
}
.sheet-rolltemplate-3dxproficiencia div.sheet-roll-container {
align-items: center;
background: #181818;
border-radius: 10px;
border: 0.2rem solid #484848;
display: flex;
flex-direction: column;
width: 100%;
}
.sheet-rolltemplate-3dxproficiencia div.sheet-roll-container span.sheet-roll-namepdj {
background: #383838;
border-radius: 7px 7px 0px 0px;
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.4rem;
font-weight: 600;
line-height: 100%;
padding-block: 0.6rem;
text-align: center;
width: 100%;
}
.sheet-rolltemplate-3dxproficiencia div.sheet-roll-container div.sheet-roll-wrap {
align-items: center;
display: flex;
justify-content: center;
padding-top: 1.9rem;
padding-bottom: 1.55rem;
width: 100%;
}
.sheet-rolltemplate-3dxproficiencia div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-proficiencia {
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.3rem;
font-weight: 600;
margin-right: 0.75rem;
}
.sheet-rolltemplate-3dxproficiencia div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-macroresult span {
background-color: #E8E8E8;
border: none;
border-radius: 4px;
color: #000000;
font-family: "Open Sans";
font-size: 1.8rem;
font-weight: 500;
padding-block: 0.1rem;
padding-inline: 0.5rem;
}
.sheet-rolltemplate-3dxproficiencia div.sheet-roll-container div.sheet-roll-wrapaction {
align-items: center;
border-top: 0.1rem solid #383838;
display: flex;
justify-content: center;
padding-top: 0.5rem;
padding-bottom: 0.6rem;
width: 100%;
}
.sheet-rolltemplate-3dxproficiencia div.sheet-roll-container div.sheet-roll-wrapaction span.sheet-roll-actionname {
color: #A9A9A9;
font-family: "Open Sans";
font-size: 1.2rem;
font-weight: 600;
margin-right: 0.4rem;
}
.sheet-rolltemplate-3dxproficiencia div.sheet-roll-container div.sheet-roll-wrapaction span.sheet-roll-levelname {
color: #A9A9A9;
font-family: "Open Sans";
font-size: 1.2rem;
font-weight: 600;
}
.sheet-rolltemplate-3dxrecurso {
padding-block: 1rem;
}
.sheet-rolltemplate-3dxrecurso div.sheet-roll-container {
align-items: center;
background: #181818;
border-radius: 10px;
border: 0.2rem solid #484848;
display: flex;
flex-direction: column;
width: 100%;
}
.sheet-rolltemplate-3dxrecurso div.sheet-roll-container span.sheet-roll-namepdj {
background: #383838;
border-radius: 7px 7px 0px 0px;
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.4rem;
font-weight: 600;
line-height: 100%;
padding-block: 0.6rem;
text-align: center;
width: 100%;
}
.sheet-rolltemplate-3dxrecurso div.sheet-roll-container div.sheet-roll-wrap {
align-items: center;
display: flex;
justify-content: center;
padding-top: 1.9rem;
padding-bottom: 1.55rem;
width: 100%;
}
.sheet-rolltemplate-3dxrecurso div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-recurso {
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.3rem;
font-weight: 600;
margin-right: 0.75rem;
}
.sheet-rolltemplate-3dxrecurso div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-macroresult span {
background-color: #E8E8E8;
border: none;
border-radius: 4px;
color: #000000;
font-family: "Open Sans";
font-size: 1.8rem;
font-weight: 500;
padding-block: 0.1rem;
padding-inline: 0.5rem;
}
.sheet-rolltemplate-3dxrecurso div.sheet-roll-container div.sheet-roll-wrapaction {
align-items: center;
border-top: 0.1rem solid #383838;
display: flex;
justify-content: center;
padding-top: 0.5rem;
padding-bottom: 0.6rem;
width: 100%;
}
.sheet-rolltemplate-3dxrecurso div.sheet-roll-container div.sheet-roll-wrapaction span.sheet-roll-actionname {
color: #A9A9A9;
font-family: "Open Sans";
font-size: 1.2rem;
font-weight: 600;
margin-right: 0.4rem;
}
.sheet-rolltemplate-3dxrecurso div.sheet-roll-container div.sheet-roll-wrapaction span.sheet-roll-namequant {
color: #A9A9A9;
font-family: "Open Sans";
font-size: 1.2rem;
font-weight: 600;
}
.sheet-rolltemplate-3dxiniciativa {
padding-block: 1rem;
}
.sheet-rolltemplate-3dxiniciativa div.sheet-roll-container {
align-items: center;
background: #181818;
border-radius: 10px;
border: 0.2rem solid #484848;
display: flex;
flex-direction: column;
width: 100%;
}
.sheet-rolltemplate-3dxiniciativa div.sheet-roll-container span.sheet-roll-namepdj {
background: #383838;
border-radius: 7px 7px 0px 0px;
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.4rem;
font-weight: 600;
line-height: 100%;
padding-block: 0.6rem;
text-align: center;
width: 100%;
}
.sheet-rolltemplate-3dxiniciativa div.sheet-roll-container div.sheet-roll-wrap {
align-items: center;
display: flex;
justify-content: center;
padding-top: 1.9rem;
padding-bottom: 1.55rem;
width: 100%;
}
.sheet-rolltemplate-3dxiniciativa div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-iniciativa {
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.3rem;
font-weight: 600;
margin-right: 0.75rem;
}
.sheet-rolltemplate-3dxiniciativa div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-macroresult span {
background-color: #E8E8E8;
border: none;
border-radius: 4px;
color: #000000;
font-family: "Open Sans";
font-size: 1.8rem;
font-weight: 500;
padding-block: 0.1rem;
padding-inline: 0.5rem;
}
.sheet-rolltemplate-3dxgenerico {
padding-block: 1rem;
}
.sheet-rolltemplate-3dxgenerico div.sheet-roll-container {
align-items: center;
background: #181818;
border-radius: 10px;
border: 0.2rem solid #484848;
display: flex;
flex-direction: column;
width: 100%;
}
.sheet-rolltemplate-3dxgenerico div.sheet-roll-container span.sheet-roll-namepdj {
background: #383838;
border-radius: 7px 7px 0px 0px;
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.4rem;
font-weight: 600;
line-height: 100%;
padding-block: 0.6rem;
text-align: center;
width: 100%;
}
.sheet-rolltemplate-3dxgenerico div.sheet-roll-container div.sheet-roll-wrap {
align-items: center;
display: flex;
justify-content: center;
padding-top: 1.9rem;
padding-bottom: 1.55rem;
width: 100%;
}
.sheet-rolltemplate-3dxgenerico div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-generico {
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.3rem;
font-weight: 600;
margin-right: 0.75rem;
}
.sheet-rolltemplate-3dxgenerico div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-macroresult span {
background-color: #E8E8E8;
border: none;
border-radius: 4px;
color: #000000;
font-family: "Open Sans";
font-size: 1.8rem;
font-weight: 500;
padding-block: 0.1rem;
padding-inline: 0.5rem;
}
.sheet-rolltemplate-3dxhabilidade {
padding-block: 1rem;
}
.sheet-rolltemplate-3dxhabilidade div.sheet-roll-container {
align-items: center;
background: #181818;
border-radius: 10px 10px 0px 0px;
border: 0.2rem solid #484848;
display: flex;
flex-direction: column;
width: 100%;
}
.sheet-rolltemplate-3dxhabilidade div.sheet-roll-container span.sheet-roll-namepdj {
background: #383838;
border-radius: 7px 7px 0px 0px;
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.4rem;
font-weight: 600;
line-height: 100%;
padding-block: 0.6rem;
text-align: center;
width: 100%;
}
.sheet-rolltemplate-3dxhabilidade div.sheet-roll-container div.sheet-roll-wrap {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
.sheet-rolltemplate-3dxhabilidade div.sheet-roll-container div.sheet-roll-attribute {
align-items: center;
display: flex;
padding-block: 0.5rem;
padding-inline: 1rem;
width: calc(100% - 2rem);
}
.sheet-rolltemplate-3dxhabilidade div.sheet-roll-container div.sheet-roll-attribute-first {
background: #181818;
border-bottom: 0.1rem solid #484848;
}
.sheet-rolltemplate-3dxhabilidade div.sheet-roll-container div.sheet-roll-attribute-second {
background: #181818;
border-bottom: 0.1rem solid #484848;
}
.sheet-rolltemplate-3dxhabilidade div.sheet-roll-container div.sheet-roll-attribute span.sheet-roll-desc {
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.3rem;
font-weight: 600;
text-align: left;
width: 12rem;
}
.sheet-rolltemplate-3dxhabilidade div.sheet-roll-container div.sheet-roll-attribute span.sheet-roll-value {
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.3rem;
padding-left: 1.5rem;
text-align: left;
width: 100%;
}
.sheet-rolltemplate-3dxhabilidade div.sheet-roll-container div.sheet-roll-attribute div.sheet-roll-value-wrapper {
font-family: "Open Sans";
padding-left: 1.3rem;
width: 100%;
}
.sheet-rolltemplate-3dxhabilidade div.sheet-roll-container div.sheet-roll-attribute span.sheet-roll-value-nome {
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.3rem;
font-weight: 500;
padding-right: 0.2rem;
padding-left: 0.4rem;
text-align: left;
width: calc(100% - 10rem);
}
.sheet-rolltemplate-3dxhabilidade div.sheet-roll-container div.sheet-roll-attribute .sheet-roll-value-roll span {
background-color: #E8E8E8;
border: none;
border-radius: 3.5px;
color: #000000;
font-family: "Open Sans";
font-size: 13.5px;
font-weight: 600;
padding-inline: 0.5rem;
}
.sheet-rolltemplate-3dxhabilidade div.sheet-roll-container span.sheet-roll-imagem {
align-items: center;
background-color: #181818;
padding-block: 0.5rem;
display: flex;
justify-content: center;
width: 100%;
}
.repcontrol {
margin-bottom: 1.5rem;
}
.sheet-rolltemplate-3dxsorte {
padding-block: 1rem;
}
.sheet-rolltemplate-3dxsorte div.sheet-roll-container {
align-items: center;
background: #181818;
border-radius: 10px;
border: 0.2rem solid #484848;
display: flex;
flex-direction: column;
width: 100%;
}
.sheet-rolltemplate-3dxsorte div.sheet-roll-container span.sheet-roll-namepdj {
background: #383838;
border-radius: 7px 7px 0px 0px;
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.4rem;
font-weight: 600;
line-height: 100%;
padding-block: 0.6rem;
text-align: center;
width: 100%;
}
.sheet-rolltemplate-3dxsorte div.sheet-roll-container div.sheet-roll-wrap {
align-items: center;
display: flex;
justify-content: center;
padding-top: 1.9rem;
padding-bottom: 1.55rem;
width: 100%;
}
.sheet-rolltemplate-3dxsorte div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-sorte {
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.3rem;
font-weight: 600;
margin-right: 0.75rem;
}
.sheet-rolltemplate-3dxsorte div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-macroresult span {
background-color: #E8E8E8;
border: none;
border-radius: 4px;
color: #000000;
font-family: "Open Sans";
font-size: 1.8rem;
font-weight: 500;
padding-block: 0.1rem;
padding-inline: 0.5rem;
}
.sheet-rolltemplate-3dxesquiva {
padding-block: 1rem;
}
.sheet-rolltemplate-3dxesquiva div.sheet-roll-container {
align-items: center;
background: #181818;
border-radius: 10px;
border: 0.2rem solid #484848;
display: flex;
flex-direction: column;
width: 100%;
}
.sheet-rolltemplate-3dxesquiva div.sheet-roll-container span.sheet-roll-namepdj {
background: #383838;
border-radius: 7px 7px 0px 0px;
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.4rem;
font-weight: 600;
line-height: 100%;
padding-block: 0.6rem;
text-align: center;
width: 100%;
}
.sheet-rolltemplate-3dxesquiva div.sheet-roll-container div.sheet-roll-wrap {
align-items: center;
display: flex;
justify-content: center;
padding-top: 1.9rem;
padding-bottom: 1.55rem;
width: 100%;
}
.sheet-rolltemplate-3dxesquiva div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-esquiva {
color: #D0D0D0;
font-family: "Open Sans";
font-size: 1.3rem;
font-weight: 600;
margin-right: 0.75rem;
}
.sheet-rolltemplate-3dxesquiva div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-macroresult span {
background-color: #E8E8E8;
border: none;
border-radius: 4px;
color: #000000;
font-family: "Open Sans";
font-size: 1.8rem;
font-weight: 500;
padding-block: 0.1rem;
padding-inline: 0.5rem;
}