@import url('https://fonts.googleapis.com/css?family=Lato&family=Montserrat:wght@800&display=swap'); /* HEADER */ .sheet-background-header {} .sheet-background-header img { max-width: 100%; } .sheet-background-none { background: none; background-color: transparent; border: none; } .sheet-background-img { background-image: url("https://i.imgur.com/ZC9ZqMi.png"); background-size: 100% 100%; } .sheet-rolltemplate-background { background-image: url('https://i.imgur.com/dv5H2ka.png'); background-size: 100% 100%; height: 40px; background-repeat: no-repeat; background-position: center; padding-top: 5px } .sheet-rolltemplate-background-spell { background-image: url('https://i.imgur.com/dv5H2ka.png'); background-size: 100% 100%; max-height: 65px; background-repeat: no-repeat; background-position: center; padding-top: 5px } .sheet-background-wizard { background-image: url("https://i.imgur.com/ZQbHhyr.png"); background-size: 100% 100%; } .sheet-background-notes { background-image: url("https://i.imgur.com/NkxQpPj.png"); background-size: 100% 100%; min-height: 200px !important; margin-top: -10vh; } .sheet-notes-title { padding-left: 71% !important; } .sheet-notes-textarea { margin: 5px 20px 15px 20px !important; min-height: 100% !important; width: 90% !important; border: none !important; } .sheet-background-religion { background-image: url("https://i.imgur.com/xCbdtSl.png"); background-size: 100% 100%; padding: 0px 20px 45px 20px; } .sheet-img-religion { height: 25px; width: 25px; } .sheet-background-frame { background-image: url("https://i.imgur.com/dv5H2ka.png"); background-size: 100% 100%; padding: 40px 50px; } .sheet-background-fortune { background-image: url("https://i.imgur.com/IQwhScV.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-color: transparent; border: none; background-size: 90% 100%; } .sheet-background-moddamage { background-image: url("https://i.imgur.com/DUC7k2a.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-color: transparent; border: none; background-size: 90% 100%; background-size: 90% 100%; } .sheet-background-hp { background-image: url("https://i.imgur.com/0rc7JqH.png") !important; background-repeat: no-repeat !important; background-position: top !important; background-color: transparent; border: none; background-size: 100% 100%; } .sheet-background-name { background-image: url("https://i.imgur.com/uDySC0X.png") !important; background-repeat: no-repeat !important; background-position: top !important; background-color: transparent; border: none; background-size: 100% 100%; } .sheet-background-skill-r { background-image: url("https://i.imgur.com/pzrPmT1.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-color: transparent; border: none; min-height: 40px; } .sheet-background-skill-s { background-image: url("https://i.imgur.com/pzrPmT1.png"); } .sheet-skills-columns { margin-left: -15px !important; margin-right: -15px; padding-left: 0px !important; padding-right: 0px !important; margin-top: 25px; } .sheet-styled-checkbox { opacity: 0; filter: alpha(opacity=0); } .sheet-styled-checkbox + label { position: relative; } .sheet-styled-checkbox + label:before { content: ''; display: inline-block; visibility: visible; left: 0; width: 0.6em; height: 0.6em; line-height: 0.6; text-align: center; /* Put checkbox styles here: */ border: 1px solid #296b76; border-radius: 100%; } .sheet-styled-checkbox:checked + label:before { content: '✔'; } .sheet-checkbox-round { width: 1.3em; height: 1.3em; background-color: white; border-radius: 50%; vertical-align: middle; border: 1px solid #ddd; -webkit-appearance: none; outline: none; cursor: pointer; } .sheet-checkbox-round:checked { background-color: #296b76; } /* VERTICAL LINE */ .sheet-vertical-line { border-right: 2px solid #296b76; } /* DOTTED BOX */ .sheet-border-box { border-style: solid; border-color: dimgrey; } .sheet-font-white{ color: white !important; } /* CSS - Step 1 */ /* Make default checkbox invisible */ .sheet-checkbox-label input { opacity: 0; position: absolute; min-height: 16px; min-width: 16px; z-index: 999; } /* CSS - Step 2 */ /* Unchecked state - makes the new box */ .sheet-checkbox-label .sheet-checkbox-custom { background: white; border: 1px solid black; border-radius: 50px; display: inline-block; /* display inline-block needed so that we can set the width */ height: 16px; width: 16px; } /* CSS - Step 3 */ /* Unchecked state - makes the check */ .sheet-checkbox-label .sheet-checkbox-custom::after { content: "✓"; opacity: 0; } /* CSS - Step 4 */ /* Checked state - chages the box */ .sheet-checkbox-label input:checked ~ .sheet-checkbox-custom { background-color: white; } /* CSS - Step 5 */ /* Checked state - changes the check */ .sheet-checkbox-label input:checked ~ .sheet-checkbox-custom::after { color: black; left: 2px; opacity: 1; position: relative; top: -1px; } /* TABS */ .sheet-character, .sheet-journal, .sheet-bio, .sheet-inventory, .sheet-spells { display: none !important; min-height: 1035px; } /* show the selected tab */ .sheet-tabstoggle[value="character"] ~ div.sheet-character, .sheet-tabstoggle[value="journal"] ~ div.sheet-journal, .sheet-tabstoggle[value="spells"] ~ div.sheet-spells, .sheet-tabstoggle[value="bio"] ~ div.sheet-bio, .sheet-tabstoggle[value="inventory"] ~ div.sheet-inventory { display: block !important; } .sheet-tab-button { font-family: 'Italianno', cursive; font-size: 15px; min-height: 30px; background-color: white; border-color: darkslategrey; border-style: solid 1px; border-radius: 0px; padding-left: 10px; padding-right: 10px; -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75); } .sheet-roll-fix { padding: 3px 0px !important; } /* Firefox */ .sheet-character-sheet input[type=number] { -moz-appearance: textfield; text-align: center; } .sheet-bio textarea { width: 100%; } /* TEXT */ .sheet-notes { border: none; background-attachment: local; background-image: linear-gradient(to right, white 10px, transparent 10px), linear-gradient(to left, white 10px, transparent 10px), repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px); line-height: 31px; padding: 8px 10px; } .subheader-span {} .sheet-text-vertical { display: flex; transform: rotate(-180deg); writing-mode: tb-lr; /* for IE */ writing-mode: vertical-lr; } .sheet-text-rb { color: #C31F26; font-family: 'Italianno', cursive; font-weight: bold; letter-spacing: 0.1em } .sheet-text-bb { font-family: 'Italianno', cursive; font-weight: bold; letter-spacing: 0.1em } .sheet-rolltemplate-center, .sheet-text-center { text-align: center !important; width: 100%; } .sheet-text-left { text-align: left; } .sheet-text-right { text-align: right; } .sheet-text-header { font-family: 'Italianno', cursive; font-size: 23px; min-height: 25px; } .sheet-withoutarrow-select { /* for Firefox */ -moz-appearance: none; /* for Safari, Chrome, Opera */ -webkit-appearance: none; margin-bottom: 0px; } /* for IE10 */ .sheet-withoutarrow-select::-ms-expand { display: none; } .sheet-text-desc { color: #296b76; font-size: 9px; } .sheet-text-desc-bigger { color: #296b76; font-size: 12px; } .sheet-text-header { font-family: 'Montserrat', sans-serif; font-size: 15px; } .sheet-text-subheader { font-family: 'Montserrat', sans-serif; font-size: 12px; } .sheet-text-important { font-family: 'Montserrat', sans-serif; font-size: 11px; } .sheet-full-tittle-center { display: flex; align-items: center; justify-content: center; width: 100%; } .sheet-full-tittle-center h4 { font-family: 'Italianno', cursive; font-size: 45px; min-height: 35px; margin: 15px auto 0 auto; } /* DIV BOXES */ .sheet-input-line { border-bottom: 2px solid; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; border-bottom-color: dimgrey; background: none; margin-left: 2px; margin-right: 2px; } .sheet-input-box { border: 2px solid; border-radius: 0; border-bottom-color: dimgrey; background: none; padding-left: 0px !important; padding-right: 0px !important; } .sheet-border-b { border-bottom: solid 2px black; } .sheet-border-circle { background: #eaeaea; border-color: black; height: 50px !important; width: 50px !important; border-radius: 50% !important; } .sheet-background-black { background: black; color: white } /* BUTTONS */ .sheet-button-label:before { content: "" !important; } .sheet-button-label { background-image: none; background-color: transparent; border-radius: 0; border: 0; box-shadow: none; text-shadow: none; margin: 0 !important; font-size: 13px !important; } /* CHECKBOX */ .sheet-checkbox-icon { height: 18px !important; width: 18px !important; margin-left: 2px; margin-right: 2px; } .sheet-checkbox-icon-bigger { height: 20px !important; width: 20px !important; margin-left: 2px; margin-right: 2px; } /* STRUCTURE */ /* Columns*/ .sheet-skill-empty, .sheet-skill-list, .sheet-skill-list .sheet-col-xs-1, .sheet-skill-list .sheet-col-xs-2 { padding-right: 0 !important; padding-left: 0 !important; } .sheet-skill-list .sheet-col-xs-8 { padding-right: 0 !important; } .sheet-skill-empty { height: 26px !important; } .sheet-skill-list { max-height: 26px; padding-top: 2px; } .sheet-column-w { display: flex; flex-flow: column wrap; min-width: 0; min-height: 0; } .sheet-column-flex-1 { flex: 1; } .sheet-rolltemplate-column-nw, .sheet-column-nw { display: flex; flex-flow: column nowrap; min-width: 0; min-height: 0; } /* Rows*/ .sheet-row-w { display: flex; flex-flow: row wrap; min-width: 0; min-height: 0; padding-right: 1rem; padding-left: 1rem; } .sheet-rolltemplate-row-nw { display: flex; flex-flow: row nowrap; min-width: 0; min-height: 0; } .sheet-row-nw { display: flex; flex-flow: row nowrap; min-width: 0; min-height: 0; padding-right: 1rem; padding-left: 1rem; } /* Rows full height inside column */ .sheet-fill-height > div { flex: 1; display: flex; justify-content: flex-start; flex-direction: row; } .sheet-position-bottom { align-content: flex-end; align-items: flex-end; } .sheet-position-sb { align-content: space-between; align-items: space-between; } .sheet-content-sa { justify-content: space-around; } .sheet-rolltemplate-content-center, .sheet-content-center { align-items: center; justify-content: center; } .sheet-content-st { align-items: stretch } /* Width */ .sheet-rolltemplate-width-100, .sheet-width-100 { width: 100%; } .sheet-width-85 { width: 85%; } .sheet-width-75 { width: 75%; } .sheet-width-70 { width: 70%; } .sheet-width-60 { width: 60%; } .sheet-rolltemplate-width-50, .sheet-width-50 { width: 50%; } .sheet-width-40 { width: 40%; } .sheet-width-40px { width: 40px; } .sheet-width-30 { width: 30%; } .sheet-width-25 { width: 25%; } .sheet-width-20 { width: 20%; } .sheet-width-15 { width: 15%; } .sheet-width-10 { width: 10%; } .sheet-width-5 { width: 5%; } .sheet-max-width-300 { max-width: 300px; } .sheet-max-width-250 { max-width: 250px; } .sheet-max-width-250 { max-width: 200px; } .sheet-max-width-125 { max-width: 125px; } .sheet-max-width-50 { max-width: 50px; } /* Height */ .sheet-height-100 { height: 100%; } .sheet-max-height-25 { max-height: 25px; } .sheet-max-height-40 { max-height: 40px; } .sheet-max-height-50 { max-height: 50px; } .sheet-max-height-150 { max-height: 150px; } .sheet-max-height-210 { max-height: 210px; } .sheet-overflow-025 { flex: 0.25; overflow: hidden; } .sheet-overflow-1 { flex: 1; overflow: hidden; } .sheet-overflow-2 { flex: 2; overflow: hidden; } .sheet-overflow-3 { flex: 3; overflow: hidden; } .sheet-flex-30 { flex: 0 0 30em; } .sheet-flex-25 { flex: 0 0 25em; } .sheet-flex-20 { flex: 0 0 20em; } .sheet-flex-15 { flex: 0 0 15em; } .sheet-flex-10 { flex: 0 0 10em; } .sheet-flex-5 { flex: 0 0 5em; } .sheet-padding-0 { padding: 0px 0px !important; } .sheet-padding-r-0 { padding-right: 0px !important; } .sheet-padding-r-5 { padding-right: 5px; } .sheet-padding-r-10 { padding-right: 10px; } .sheet-padding-r-15 { padding-right: 15px; } .sheet-padding-r-30 { padding-right: 30px; } .sheet-padding-r-35 { padding-right: 35px; } .sheet-padding-l-0 { padding-left: 0px !important; } .sheet-padding-l-5 { padding-left: 5px; } .sheet-padding-l-10 { padding-left: 10px; } .sheet-padding-l-15 { padding-left: 15px !important; } .sheet-padding-l-30 { padding-left: 30px !important; } .sheet-padding-l-35 { padding-left: 35px; } .sheet-padding-t-5 { padding-top: 5px; } .sheet-padding-t-10 { padding-top: 10px; } .sheet-padding-t-20 { padding-top: 20px; } .sheet-padding-t-15 { padding-top: 15px; } .sheet-padding-t-35 { padding-top: 35px; } .sheet-padding-b-2 { padding-bottom: 2px !important; } .sheet-padding-b-5 { padding-bottom: 5px !important; } .sheet-padding-b-6 { padding-bottom: 6px !important; } .sheet-padding-b-10 { padding-bottom: 10px; } .sheet-padding-b-15 { padding-bottom: 15px; } .sheet-padding-b-50 { padding-bottom: 50px !important; } .sheet-margin-b-5 { margin-bottom: 5px !important; } .sheet-margin-b-50 { margin-bottom: 50px !important; } .sheet-margin-b-10 { margin-bottom: 10px; } .sheet-margin-b-0 { margin-bottom: 0px; } .sheet-margin-0 { margin: 0px 0px !important; } .sheet-margin-l-0 { margin-left: 0px !important; } .sheet-margin-l-2 { margin-left: 2px !important; } .sheet-margin-l-4 { margin-left: 4px !important; } .sheet-margin-l-5 { margin-left: 5px !important; } .sheet-margin-l-15 { margin-left: 15px !important; } .sheet-margin-l-20 { margin-left: 20px !important; } .sheet-margin-l-35 { margin-left: 35px !important; } .sheet-margin-l-40 { margin-left: 40px !important; } .sheet-margin-r-0 { margin-right: 0px !important; } .sheet-margin-r-2 { margin-right: 2px !important; } .sheet-margin-r-3 { margin-right: 3px !important; } .sheet-margin-r-5 { margin-right: 5px !important; } .sheet-margin-r-6 { margin-right: 6px !important; } .sheet-margin-r-15 { margin-right: 15px !important; } .sheet-margin-t-neg-5 { margin-top: -5px !important; } .sheet-margin-t-neg-7 { margin-top: -7px !important; } .sheet-margin-t-neg-10 { margin-top: -10px !important; } .sheet-margin-t-5 { margin-top: 5px !important; } .sheet-margin-t-10 { margin-top: 10px !important; } .sheet-margin-t-15 { margin-top: 15px !important; } .sheet-margin-t-20 { margin-top: 20px !important; } .sheet-margin-t-25 { margin-top: 25px !important; } .sheet-margin-t-35 { margin-top: 35px !important; } .sheet-margin-t-45 { margin-top: 45px !important; } .sheet-margin-t-90 { margin-top: 90px !important; } .sheet-margin-t-neg-5 { margin-top: -5px !important; } .sheet-margin-t-neg-10 { margin-top: -10px !important; } .sheet-margin-t-neg-60 { margin-top: -60px !important; } .sheet-margin-t-neg-70 { margin-top: -70px !important; } .sheet-margin-t-neg-80 { margin-top: -80px !important; } .sheet-margin-b-2 { margin-bottom: 2px !important; } .sheet-margin-t-5 { margin-top: 5px !important; } .sheet-margin-b-10 { margin-bottom: 10px !important; } .sheet-margin-b-25 { margin-bottom: 25px !important; } .sheet-padding-b-6 { margin-bottom: 6px !important; } .sheet-margin-t-2 { margin-top: 2px !important; } .sheet-padding-t-6 { margin-top: 6px !important; } .sheet-margin-auto { margin: auto; } .sheet-rolltemplate-col-xs, .sheet-rolltemplate-col-xs-1, .sheet-rolltemplate-col-xs-2, .sheet-rolltemplate-col-xs-3, .sheet-rolltemplate-col-xs-4, .sheet-rolltemplate-col-xs-5, .sheet-rolltemplate-col-xs-6, .sheet-rolltemplate-col-xs-7, .sheet-rolltemplate-col-xs-8, .sheet-rolltemplate-col-xs-9, .sheet-rolltemplate-col-xs-10, .sheet-rolltemplate-col-xs-11, .sheet-rolltemplate-col-xs-12, .sheet-col-xs, .sheet-col-xs-1, .sheet-col-xs-2, .sheet-col-xs-3, .sheet-col-xs-4, .sheet-col-xs-5, .sheet-col-xs-6, .sheet-col-xs-7, .sheet-col-xs-8, .sheet-col-xs-9, .sheet-col-xs-10, .sheet-col-xs-11, .sheet-col-xs-12 { box-sizing: border-box; -ms-flex: 0 0 auto; -webkit-box-flex: 0; flex: 0 0 auto; padding-right: 1rem; padding-left: 1rem; } .sheet-col-xs { -webkit-flex-grow: 1; -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } .sheet-col-xs-1 { -ms-flex-preferred-size: 8.333%; flex-basis: 8.333%; max-width: 8.333%; } .sheet-col-xs-2 { -ms-flex-preferred-size: 16.667%; flex-basis: 16.667%; max-width: 16.667%; } .sheet-col-xs-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } .sheet-col-xs-30 { -ms-flex-preferred-size: 30%; flex-basis: 30%; max-width: 30%; } .sheet-col-xs-4 { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; max-width: 33.333%; } .sheet-col-xs-5 { -ms-flex-preferred-size: 41.667%; flex-basis: 41.667%; max-width: 41.667%; } .sheet-col-xs-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .sheet-col-xs-7 { -ms-flex-preferred-size: 58.333%; flex-basis: 58.333%; max-width: 58.333%; } .sheet-col-xs-8 { -ms-flex-preferred-size: 66.667%; flex-basis: 66.667%; max-width: 66.667%; } .sheet-col-xs-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } .sheet-col-xs-10 { -ms-flex-preferred-size: 83.333%; flex-basis: 83.333%; max-width: 83.333%; } .sheet-col-xs-11 { -ms-flex-preferred-size: 91.667%; flex-basis: 91.667%; max-width: 91.667%; } .sheet-col-xs-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } .sheet-col-xs-offset-1 { margin-left: 8.333%; } .sheet-col-xs-offset-2 { margin-left: 16.667%; } .sheet-col-xs-offset-3 { margin-left: 25%; } .sheet-col-xs-offset-4 { margin-left: 33.333%; } .sheet-col-xs-offset-5 { margin-left: 41.667%; } .sheet-col-xs-offset-6 { margin-left: 50%; } .sheet-col-xs-offset-7 { margin-left: 58.333%; } .sheet-col-xs-offset-8 { margin-left: 66.667%; } .sheet-col-xs-offset-9 { margin-left: 75%; } .sheet-col-xs-offset-10 { margin-left: 83.333%; } .sheet-col-xs-offset-11 { margin-left: 91.667%; } /* TRICKS */ .sheet-inverse { transform: scaleX(-1); } .sheet-element-hidden { visibility: hidden !important; } .sheet-hide-arrow { -o-appearance: none; -ms-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .sheet-element-break { flex-basis: 100% !important; width: 0px !important; height: 0px !important; overflow: hidden !important; } /* REPEATING */ .charsheet .repcontrol_add, .charsheet .repcontrol_edit, .charsheet .repcontrol_del { display: block; background: #000; color: white; box-shadow: none; font-size: 0.9em; height: 2.2em; } .sheet-character-sheet .itemcontrol { z-index: 999; } .sheet-character-sheet .repitem { display: flex; align-items: stretch; margin-bottom: 3px; justify-content: flex-start; width: 100%; } .sheet-character-sheet .repcontainer { width: 100%; } .sheet-character-sheet .repcontrol { display: flex !important; flex-flow: row nowrap !important; } /* +ADD - MODIFY BUTTON */ [data-groupname^="repeating_"] > button.btn.repcontrol_add::after { content: "Nuevo"; background-color: #296b76 !important; font-family: 'Montserrat', sans-serif; text-align: center; color: white; margin-left: -25px; } /* Overlay the Modify/Done button. Overlying text is static */ [data-groupname^="repeating_"] > button.btn.repcontrol_edit::after { content: "Modificar"; background-color: #296b76 !important; font-family: 'Montserrat', sans-serif; text-align: center; color: white; margin-left: -30px; } /* this sets the formatting for all repcontrol buttons */ .sheet-character-sheet .repcontrol_add, .sheet-character-sheet .repcontrol_edit, .sheet-character-sheet .repcontrol_del { display: inline-flex; background-color: #296b76 !important; color: white; box-shadow: none; font-size: 0.7em; height: 1.7em; } .sheet-container-row { margin: 0 0 15px 0; align-content: flex-start; align-items: stretch; } .sheet-col-flex-1 { display: flex; flex-flow: row wrap; width: 100%; } .sheet-rolltemplate-atacar .sheet-container { background-color: #ffffff; border: 1px solid; padding: 2px; width: 189px; } .sheet-rolltemplate-atacar .sheet-container h1 { color: rgb(126, 45, 64); font-size: 1.2em; font-variant: small-caps; line-height: 20px; } .sheet-rolltemplate-atacar div { padding: 2px; } ; .sheet-rolltemplate-atacar span { color: rgb(126, 45, 64); font-family: 'Italianno', cursive; font-size: 1.2em; font-variant: small-caps; line-height: 1.6em; padding-left: 5px; text-align: left; } .sheet-rolltemplate-atacar .sheet-subheader { color: #000; font-size: 1em; font-style: italic; } .sheet-rolltemplate-atacar .sheet-arrow-right { border-bottom: 2px solid transparent; border-left: 180px solid rgb(126, 45, 64); border-top: 2px solid transparent; } .sheet-rolltemplate-atacar .sheet-tcat { font-style: italic; } .sheet-rolltemplate-atacar .inlinerollresult { background-color: #ffffff; border: none; } .sheet-rolltemplate-atacar .inlinerollresult.fullcrit { color: #3FB315; border: none; } .sheet-rolltemplate-atacar .inlinerollresult.fullfail { color: #B31515; border: none; } .sheet-rolltemplate-atacar .inlinerollresult.importandivoll { color: #4A57ED; border: none; }