/* Global stylings
============================= */

@import url("https://fonts.googleapis.com/css?family=Roboto|Open Sans|Bellota&display=swap");

.charsheet,
input,
select,
option,
textarea {
  font-family: "Apple Chancery", "Bellota", "Palatino Linotype", arial; }

.charsheet label {
    font-size: 1.2em;
    margin: 6px 0 10px 0;
    font-weight: bold;
    max-width: 100%;
}

* , *:before, *:after{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
}

textarea {
    border-radius: 6px;
    line-height: 20px;
    width: 98%;
    background: var(--input-bg-color);
    color: var(--input-text-color);
}

input[type=number], input[type=text], select {
    border-radius: 6px;
    line-height: 20px;
    height: 30px;
    max-width: 300px;
    vertical-align: middle;
    background: var(--input-bg-color);
    color: var(--input-text-color);
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

td, th {
    text-align: left;
    padding: 3px;
    width: 150px;
}

button[type=roll] {
    height: 23px;
    border-radius: 4px;
}

hr {
    margin: 12px;
    border-color: var(--divider-color);
}

.flex {
    display: flex;
    justify-content: space-around;
}

.charsheet .flex-column {
    display: flex;
    flex-direction: column;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

.flex-vertical-center {
    align-items: center;
}

.full-width {
    min-width: 98%
}

.caps {
    text-transform: uppercase;
}

.pictos {
    font-family: "pictos";
}

.font-12 {
    font-size: 12px;
}

/* Default Repeating section buttons (Add, Modify, Done)
============================= */
.repcontainer .itemcontrol {
    z-index: 100;
}

.repcontrol_add,
.repcontrol_edit {
    background: transparent none repeat scroll 0% 0%;
    border: medium none;
    box-shadow: none;
    color: var(--main-bg-color)
}

button.btn.repcontrol_add::before,
button.btn.repcontrol_edit::after {
    visibility: visible;
    font-family: 'pictos';
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    background-color: #f5f5f5;
    background-image: linear-gradient(#fff,#e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-bottom-color: rgb(204, 204, 204);
    border-bottom-color: #bbb;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px 6px;
    color: #373737;
}

button.btn.repcontrol_add::before {
    content: "&";
}

button.btn.repcontrol_edit::after {
    content: "(";
}

.editmode ~ .repcontrol .repcontrol_edit::after {
    content: ')';
}

button.btn.repcontrol_add:hover,
button.btn.repcontrol_edit:hover {
    color: var(--main-bg-color);
    background: var(--main-bg-color)
}

button.btn.repcontrol_add:hover::before,
button.btn.repcontrol_edit:hover::after {
    background: #e4e4e4;
}

.repcontrol_del {
    background-color: darkred;
    font-family: "pictos";
}

/* Colors
============================= */
.charsheet {
    --main-bg-color: #eeffff;
    --header-bg-color: #aaeeaa;
    --header-text-color: #000;
    --selected-item-bg-color: #299;
    --selected-item-text-color: #fff;
    --unselected-item-bg-color: #00cdcd;
    --unselected-item-text-color: #000;
    --divider-color: lightgray;
    --icon-bg-color: #88394d;
    --input-bg-color: #fff;
    --input-text-color: #000;
}

.mainBgColor[value='white']       ~ .characterSheet { --main-bg-color: #fff;    --divider-color: #90939c; }
.mainBgColor[value='grayscale']   ~ .characterSheet { --main-bg-color: #f3f3f3; --divider-color: #000; }
.mainBgColor[value='book']        ~ .characterSheet { --main-bg-color: #f3efe6; --divider-color: #424242; }
.mainBgColor[value='summer']      ~ .characterSheet { --main-bg-color: #fef7ed; --divider-color: #424242; }
.mainBgColor[value='fall']        ~ .characterSheet { --main-bg-color: #fde7e8; --divider-color: #cd5142; }
.mainBgColor[value='winter']      ~ .characterSheet { --main-bg-color: #fafefe; }
.mainBgColor[value='spring']      ~ .characterSheet { --main-bg-color: #f8f9f3; --divider-color: #000; }
.mainBgColor[Value='lilac']       ~ .characterSheet { --main-bg-color: #fbeeff; --divider-color: #000; }

.headerBgColor[value='blue']      ~ .characterSheet { --header-bg-color: #45619e; --header-text-color: #fff; }
.headerBgColor[value='grayscale'] ~ .characterSheet { --header-bg-color: #6d6d6d; --header-text-color: #fff; }
.headerBgColor[value='book']      ~ .characterSheet { --header-bg-color: #f5edac; }
.headerBgColor[value='summer']    ~ .characterSheet { --header-bg-color: #e0861b; --header-text-color: #fff; }
.headerBgColor[value='fall']      ~ .characterSheet { --header-bg-color: #d1425e; --header-text-color: #fff; }
.headerBgColor[value='winter']    ~ .characterSheet { --header-bg-color: #318baa; --header-text-color: #fff; }
.headerBgColor[value='spring']    ~ .characterSheet { --header-bg-color: #9ece84; --header-text-color: #fff; }
.headerBgColor[value='lilac']     ~ .characterSheet { --header-bg-color: #b394d8;; --header-text-color: #fff; }

.iconBgColor[value='book']        ~ .characterSheet { --icon-bg-color: #5bb2b6; }
.iconBgColor[value='grayscale']   ~ .characterSheet { --icon-bg-color: #8f8f8f; }
.iconBgColor[value='summer']      ~ .characterSheet { --icon-bg-color: #c40b45; }
.iconBgColor[value='fall']        ~ .characterSheet { --icon-bg-color: #e3801d; }
.iconBgColor[value='winter']      ~ .characterSheet { --icon-bg-color: #0d7075; }
.iconBgColor[value='spring']      ~ .characterSheet { --icon-bg-color: #87ceeb; }
.iconBgColor[value='lilac']       ~ .characterSheet { --icon-bg-color: #915173; }

.radioBgColor[value='blue']       ~ .characterSheet { --selected-item-bg-color: #45619e; --unselected-item-bg-color: #90b2ff;}
.radioBgColor[value='grayscale']  ~ .characterSheet { --selected-item-bg-color: #585858; --unselected-item-bg-color: #a3a3a3;}
.radioBgColor[value='book']       ~ .characterSheet { --selected-item-bg-color: #9f8156; --unselected-item-bg-color: #d2bb95;}
.radioBgColor[value='summer']     ~ .characterSheet { --selected-item-bg-color: #f1c076; --unselected-item-bg-color: #ffdcaa;}
.radioBgColor[value='fall']       ~ .characterSheet { --selected-item-bg-color: #bd3b55; --unselected-item-bg-color: #fe849b;}
.radioBgColor[value='winter']     ~ .characterSheet { --selected-item-bg-color: #028493; --unselected-item-bg-color: #a5d6ea;}
.radioBgColor[value='spring']     ~ .characterSheet { --selected-item-bg-color: #72aa75; --unselected-item-bg-color: #d9e5b7;}
.radioBgColor[value='lilac']      ~ .characterSheet { --selected-item-bg-color: #865abb; --unselected-item-bg-color: #f2ccff;}

/* ============= End Colors ================== */

.logo {
    width: auto;
    height: 120px;
    margin-top: 10px;
}

.gmlogo {
    width: 50%
}

.charsheet .header {
    color: var(--header-text-color);
    background-color: var(--header-bg-color);
    font-size: 1.05em;
    border-radius: 4px;
    padding: 1px 5px;
}

.partyOptions {
    display: flex;
    justify-content: flex-start;
    margin: 9px;
}

.personalItems {
    justify-content: flex-start;
}

.round-box {
    border: 2px solid gray;
    border-radius: 9px;
    padding: 9px;
}

/* Grid for the HP, MP, and Condition
============================= */

.hpmpgrid {
    display: grid;
    grid-template-columns: repeat(2, .5fr) 1fr;
    grid-template-rows: .25fr 1fr;
    grid-column-gap: 2px;
    grid-row-gap: 0px;
}

.hpHeader { grid-area: 1 / 1 / 2 / 2; }
.mpHeader { grid-area: 1 / 2 / 2 / 3; }
.hp { grid-area: 2 / 1 / 3 / 2; }
.mp { grid-area: 2 / 2 / 3 / 3; }
.condHeader { grid-area: 1 / 3 / 2 / 4; }
.condition { grid-area: 2 / 3 / 3 / 4; }


.hpmpHeader {
    padding: auto;
    justify-content: flex-start;
    font-weight: bold;
    border-radius: 4px;
    padding: 0 5px;
}

.icon {
    width: 50px;
    height: auto;
    background: var(--icon-bg-color);
    border-radius: 6px;
    margin: 3px;
}

.icon-small{
    width: 30px;
    padding: 3px;
}

.charsheet .condionBar {
    align-items: center;
    padding: 6px 0 0 0;
    margin: 0px;
    font-size: 1em;
}

.charsheet .condionBar label {
    padding: 0px;
}

.condAttribute {
    height: 20px;
    width: 50px;
    line-height: 20px;
    padding: 0;
    margin: 0 5px;
    text-align: center;
}

/* Grid for the main stat boxes STR, DEX, INT, SPI
============================= */
.coreStatGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.coreStatGrid select {
    width: 50px;
    text-align: center;
    text-align-last: center;
}

.coreStatText         { grid-area: 1 / 1 / 2 / 2; font-size: 1.25em; text-align: center; font-weight: bold;}
.coreStatBaseDie      { grid-area: 2 / 1 / 3 / 2; text-align: center; align-items: center;}
.coreStatCurrentDie   { grid-area: 1 / 2 / 3 / 3; align-items: center; justify-content: end}

.coreStatCurrentDie input[type='number'] {
    text-align: center;
    width: 60px;
    height: 50px;
    font-size: 2em;
    margin: 6px 0 0 0;
}

/*============================= */

.charoptions {
    width: 100px;
    position: relative;
    top: 5px;
}

.classOtherinput {
    width: 230px;
}

.attributeType {
    width: 65px;
    position: relative;
    top: 5px;
    text-align: center;
    text-align-last: center;
}

.classSkillRoll {
    margin-left: 10px;
}

.spellRow {
    margin-right: 2px;
    margin-top: 2px;
}

.spellDetails {
    margin-top: 5px;
    margin-left: 5px;
    vertical-align: top;
    display: inline-block;
}

.spellEffect {
    height: 75px;
}

.spellEffectDisplay {
    padding-left: 10px;
    padding-bottom: 10px;
    margin: 0 5px;
    font-family: 'Roboto';
    white-space: pre-wrap;
    word-break: break-word;
}

.spellTypes {
    width: 130px;
    position: relative;
}

.spellDuration {
    width: 130px;
}

.spellTarget {
    width: 130px;
}

.spellRange {
    width: 130px;
}

.dtype {
    width: 60px;
    position: relative;
    top: 5px;
}

.skillCheck {
    position: relative;
    bottom: 5px;
    top: 1px;
}

.skillCheckColumn {
    min-width: 30%;
}

.conditionCheck {
    position: relative;
    bottom: 5px;
}

.coreAttributes {
    display: flex;
    flex-flow: row;
    justify-content: space-around;
}

.attrLabel {
    margin: 6px 0 3px 0;
    width: 98%;
    padding: 2px 5px;
    border-radius: 3px;
}

.healthLabel, .infoLabel {
    position: relative;
    top: 5px;
}

.journeyLabel {
    font-size: 13px;
    display: block;
    position: relative;
    top: 2px;
    left: 3px;
    padding-bottom: 2px;
}

.journeyMod {
    float: right;
    margin-bottom: 2px;
}

.itemLabel {
    position: relative;
    top: 5px;
}

.terrain {
    width: 120px;
    position: relative;
    top: 3px;
}

.applyModifier {
    position: relative;
    top: 5px;
}

.hidden {
    display: none;
}

.itemCount {
    position: relative;
    left: 38px;
}

.showDiv {
    display: none;
}

.showDiv:not(:checked) ~ div, fieldset {
    display: none !important;
}

.showDiv:checked ~ div, fieldset {
    display: inline;
}

.showFumble {
    display: none;
}

.showFumble:not(:checked) ~ label {
    display: none !important;
}

.showFumble:checked ~ label {
    display: inline;
}

span.overburdenPenalty {
    position: relative;
    top: 3px;
}

input.overburdenPenalty {
    position: relative;
    top: 1px
}

.bonusPenaltyPreferences {
    position: relative;
    bottom: 8px;
}

.checkLabel {
    position: relative;
    top: 10px;
}

.terrainLabel,
.weatherLabel {
    display: inline-block;
}

.notesToggle {
    position: relative;
    right: 21px;
    top: 10px;
    opacity: 0;
    z-index: 999;
}

.notesIcon {
    position: relative;
    color: var(--header-bg-color);
    top: 12px;
    font-size: 1.5em;
}

.notesArea {
    width: 500px;
    height: 75px;
}

.spellsLabel {
    margin: 10px 0;
}

.penaltyCondition {
    display: none;
}

.penaltyCondition:checked ~ input {
    border-color: #ff8888;
}

.diceAdjustment[value='increased'] ~ input{
    border: 1px solid limegreen;
}

.diceAdjustment[value='reduced'] ~ input{
    border: 1px solid #ff8888;
}

.deathCondition {
    display: none;
}

.deathCondition:checked ~ input {
    border-color: red;
}

.bonusCondition {
    display: none;
}

.bonusCondition:checked ~ input {
    border-color: green;
}

.inlineCheckbox {
    display: inline;
}

.charsheet .headerLabel {
    width: 240px;
    height: 20px;
    position: inherit;
}

.charsheet .headerLabel-eq {
    font-size: 13px;
    width: max-content;
    min-width: 240px;
}

.loweredHeaderLabel {
    margin-top: 15px;
}

.checkboxLabel {
    font-weight: bold;
    font-size: 12px;
    display: inline;
}

.weaponRow2 {
    position:relative;
    bottom: 4px;
}

.damage {
    position: relative;
    bottom: 6px;
}

.concentration {
    display: inline;
}

/* Weapon Mastery
    ============================= */
.charsheet input.radioChoice {
    width: 130px;
    cursor: pointer;
    position: relative;
    opacity: 0;
    z-index: 9999;
    height: 18px;
}

span.radioChoice {
    text-align: center;
    display: inline-block;
    background: var(--unselected-item-bg-color);
    color: var(--unselected-item-text-color);
    border-radius: 4px;
    width: 130px;
    cursor: pointer;
    position: relative;
    margin-left: -133px;
    font-weight: bold;
    margin-bottom: 5px;
}

input.radioChoice1:checked + span.radioChoice1,
input.radioChoice2:checked + span.radioChoice2,
input.radioChoice3:checked + span.radioChoice3,
input.radioChoice4:checked + span.radioChoice4,
input.radioChoice5:checked + span.radioChoice5,
input.radioChoice6:checked + span.radioChoice6 {
    background: var(--selected-item-bg-color);
    color: var(--selected-item-text-color);
    border-radius: 4px;
    border: transparent;
}

.weaponBar {
    padding-left: 10px;
}

/* High Level Tabs
    ============================= */
.charsheet input.tab {
    width: 140px;
    height: 40px;
    cursor: pointer;
    position: relative;
    opacity: 0;
    z-index: 9999;
}

span.tab {
    text-align: center;
    display: inline-block;
    font-size: 17px;
    background: var(--main-bg-color);
    color: var(--unselected-item-text-color);
    font-weight: bold;
    border-radius: 4px;
    width: 140px;
    height: 40px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-left: -144px;
    line-height: 40px;
    border: 1px solid var(--unselected-item-bg-color);
}

span.tab-demo {
    margin-left: 0;
    cursor: default;
    background: var(--selected-item-bg-color);
    color: var(--selected-item-text-color);
}

.charsheet input.tab6 {
    width: 20px;
}

.charsheet span.tab6 {
    font-family: "pictos";
    font-size: 10px;
    width: 20px;
    margin-left: 0;
    right: 25px;
}

input.tab1:checked + span.tab1,
input.tab2:checked + span.tab2,
input.tab3:checked + span.tab3,
input.tab4:checked + span.tab4,
input.tab5:checked + span.tab5,
input.tab6:checked + span.tab6 {
    background: var(--selected-item-bg-color);
    color: var(--selected-item-text-color);
    border-radius: 2px;
    border: transparent;
}

input.tab1:not(:checked) ~ span.characterDetails,
input.tab2:not(:checked) ~ span.characterClass,
input.tab3:not(:checked) ~ span.characterStats,
input.tab4:not(:checked) ~ span.characterChecks,
input.tab5:not(:checked) ~ span.characterEquipment,
input.tab6:not(:checked) ~ span.settingsTab {
    display: none;
}

input.tab1:checked ~ span.characterDetails,
input.tab2:checked ~ span.characterClass,
input.tab3:checked ~ span.characterStats,
input.tab4:checked ~ span.characterChecks,
input.tab5:checked ~ span.characterEquipment,
input.tab6:checked ~ span.settingsTab {
    display: block;
    background-color:var(--main-bg-color);
    padding: 5px;
}

/* Roll Templates
    ============================= */
.sheet-rolltemplate-skillCheck .sheet-rollTitle,
.sheet-rolltemplate-accuracyCheck .sheet-rollTitle,
.sheet-rolltemplate-oneDieCheck .sheet-rollTitle {
    color: white;
    padding: .6em 25px;
    font-size: 1.2em;
    margin-bottom: 3px;
    border-spacing: 0;
    text-align: center;
    background-image:
        url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ryuutama/images/rollTitleBookendLeft.svg'),
        url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ryuutama/images/rollTitleBookendRight.svg');
    background-position: top left, top right;
    background-repeat: repeat-y;
    min-height: 10px;
    background-size: 20px auto;
    font-family: 'Apple Chancery', 'Bellota', 'Palatino Linotype', cursive;
    font-weight: bold;
}

.sheet-rolltemplate-skillCheck .sheet-rollTitle,
.sheet-rolltemplate-oneDieCheck .sheet-rollTitle,
.sheet-rolltemplate-accuracyCheck .sheet-rollTitle {background-color:#aaa57c;}

.sheet-rolltemplate-skillCheck .sheet-rollTitle.sheet-Spring,
.sheet-rolltemplate-oneDieCheck .sheet-rollTitle.sheet-Spring,
.sheet-rolltemplate-accuracyCheck .sheet-rollTitle.sheet-Spring {background-color:#72aa75;}

.sheet-rolltemplate-skillCheck .sheet-rollTitle.sheet-Summer,
.sheet-rolltemplate-oneDieCheck .sheet-rollTitle.sheet-Summer,
.sheet-rolltemplate-accuracyCheck .sheet-rollTitle.sheet-Summer {background-color:#e0861b;}

.sheet-rolltemplate-skillCheck .sheet-rollTitle.sheet-Fall,
.sheet-rolltemplate-oneDieCheck .sheet-rollTitle.sheet-Fall,
.sheet-rolltemplate-accuracyCheck .sheet-rollTitle.sheet-Fall {background-color:#9e022b;}

.sheet-rolltemplate-skillCheck .sheet-rollTitle.sheet-Winter,
.sheet-rolltemplate-oneDieCheck .sheet-rollTitle.sheet-Winter,
.sheet-rolltemplate-accuracyCheck .sheet-rollTitle.sheet-Winter {background-color:#318baa;}

.sheet-rolltemplate-skillCheck .sheet-rollResult,
.sheet-rolltemplate-accuracyCheck .sheet-rollResult,
.sheet-rolltemplate-oneDieCheck .sheet-rollResult{
    margin: 1em;
    vertical-align: top;
    text-decoration: none;
    text-align: center;
}

.sheet-rolltemplate-skillCheck .sheet-critical,
.sheet-rolltemplate-accuracyCheck .sheet-critical {
    color:green;
    font-weight:bold;
    margin-top: 5px;
}

.sheet-rolltemplate-skillCheck .sheet-fumble,
.sheet-rolltemplate-accuracyCheck .sheet-fumble {
    color:red;
    font-weight:bold;
    margin-top: 5px;
}

.sheet-rolltemplate-skillCheck .sheet-container,
.sheet-rolltemplate-accuracyCheck .sheet-container,
.sheet-rolltemplate-oneDieCheck .sheet-container {
    background-color: #ffffff;
    border: 1px solid gray;
    border-radius: 3px;
    width: 98%;
    overflow: auto;
}

.sheet-rolltemplate-skillCheck .inlinerollresult,
.sheet-rolltemplate-accuracyCheck .inlinerollresult,
.sheet-rolltemplate-oneDieCheck .inlinerollresult {
    background-color: #fff;
    border: 2px solid #fff;
    padding: 3px 3px 0px 3px;
}

.sheet-rolltemplate-oneDieCheck .sheet-rollFreeText {
    margin-left: 5px;
}

.sheet-rolltemplate-spellContainer {
    border: 1px solid gray;
    border-radius: 3px;
    width: 98%;
}

.sheet-rolltemplate-spellCard {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    background-color: #d0d2e4;
}

.sheet-rolltemplate-spellTitle,
.sheet-rolltemplate-spellAttrText {
    background-color: #45619e;
    font-family: 'Open Sans', Arial;
    font-weight: bold;
    font-size: 12px;
    justify-content: center;
    color: white;
    padding: 1px 3px;
}

.sheet-rolltemplate-spellAttrText a[href^="!"],
.sheet-rolltemplate-spellAttrText a[href^="~"] {
    background: none;
    color: #000;
    border: none;
    padding: 0;
    font-weight: bold;
}

.sheet-rolltemplate-spellAttr {
    flex: 1;
}

.sheet-rolltemplate-spellAttrText,
.sheet-rolltemplate-spellEffect {
    background-color: #d0d2e4;
    color: black;
    font-weight: normal;
}

.sheet-rolltemplate-spellEffect {
    background-color: #fff;
    padding: 3px;
}

/* Styling that removes the box around roll buttons
    ============================= */
button[type=roll].skill-check-button::before { 
    content: '';
    display: none;
 }

.charsheet button[type=roll].skill-check-button:hover {
    color: var(--selected-item-bg-color);
    text-shadow: 0 1px 0 var(--unselected-item-bg-color);
}

.charsheet button[type=roll].skill-check-button {
    background-color: transparent;
    font-size: 1em;
    color: var(--main-text-color);
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    border: none;
    padding: 0px;
    margin: 0px;
    height: auto;
}

/* Repeating Config buttons
    ============================= */

.config-toggles {
    font-family: "pictos";
    position: relative;
    cursor: pointer;
    opacity: 0.5;
    float: right;
}

span.config-toggles {
    bottom: 20px;
}

input.config-checkbox {
    opacity: 0;
    z-index: 2;
    bottom: 17px;
}

.settings-toggle {
    right: -12px;
}

input.collapse-toggle {
    right: -11px;
}

span.collapse-toggle {
    right: -25px;
}

input.config-toggles:not(:checked) + span {
    opacity: 1;
}

input[name='attr_collapse']:checked ~ hr,
input[name='attr_collapse']:checked ~ div.collapse,
input[name='attr_settings']:checked ~ div.settings {
    display: none;
}

div.collapse,
div.settings {
    display: flex;
}

.add-skill-checkbox {
    position: absolute;
    right: 0px;
    top: 5px;
}

.add-skill-icon {
    right: -3px;
    top: 2px;
}

/* Spell repeating section
    ============================= */


.spell-details {
    display: grid;
    grid-template-columns: minmax(200px,25%) minmax(50px,5%) minmax(100px,10%) minmax(200px,50%) minmax(120px,15%) minmax(105px,10%);
    grid-template-rows: 1fr;
    text-align: left;
    width: 90%;
    height: 20px;
}

.spellName     { grid-area: 1 / 1 / 2 / 2; text-align: left;}
.spellCost     { grid-area: 1 / 2 / 2 / 3; }
.spellDuration { grid-area: 1 / 3 / 2 / 4; }
.spellTarget   { grid-area: 1 / 4 / 2 / 5; }
.spellRange    { grid-area: 1 / 5 / 2 / 6; }
.spellTypes    { grid-area: 1 / 6 / 2 / 7; }

.spellWrap {
    white-space: normal;
    width: 100%;
    word-break: break-all;
}

.repcontainer[data-groupname='repeating_spells'] {
    padding-bottom: 20px;
}

/* Journey Rules
============================= */

.journeyRulesGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    justify-items: center;
}

.journeyRulesTitle { grid-area: 1 / 1 / 2 / 4; }
.journeyRulesTravelCheck { grid-area: 2 / 1 / 4 / 2; }
.journeyRulesDirectionCheck { grid-area: 2 / 2 / 4 / 3; }
.journeyRulesCampCheck { grid-area: 2 / 3 / 4 / 4; }

/* NPC checkbox functionality
    ============================= */
.block-switch {
    float: right;
    overflow: auto;
    margin: 0;
    padding: 0;
    max-width: 40px;
    text-align-last: center;
    border: none;
    border-bottom: 1px solid gray;
    border-radius: 0;
}

.hidden {
    display: none;
}

.hider:not(:checked) + div {
    display: none;
}


/* NPC Sheet styling
    ============================= */
.npc-sheet-container * {
    font-family: 'Open Sans';
    font-weight: bold;
    font-size: 12px;
    background-color: #ffffff;
}

.npc-sheet-container table {
    width: 100%;
}

.npc-sheet-container td {
    padding: 1px 10px;
}

.npc-sheet-container td::first-letter {
    font-size: 125%;
}

.npc-sheet-container input[type=text],
.npc-sheet-container label {
    background-color:rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    transition:height 1s;
    display: inline;
    border: none;
    outline:none;
}

.npc-sheet-container input[type=number],
.npc-sheet-container select {
    -moz-appearance:textfield; /* Firefox */
    background-color: white;
    text-align: center;
    vertical-align: middle;
    border:  none;
    outline: none;
}

.npc-sheet-container
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

td.npc-name {
    width: 100%;
    padding: 0;
}

input.npc-name {
    text-transform: uppercase;
    font-size: 20px;
    color: #485A7F;
    width: 100%;
    max-width: unset;
}

.npc-level-label {
    font-family: 'Open Sans', sans-serif;
    background-color: #EB6481;
    text-align: center;
    font-size: 10px;
    color: white;
    width: 7%;
}

.npc-level-input {
    background-color: #F1DCDA;
    width: 10%;
}

.npc-table-section-top-left {
    background-color: #E0C2DB;
    width: 25%;
}

.npc-table-section-top-right {
    background-color: #F7FAE5;
    padding-right: 0;
    margin-right: 0;
    width: 75%;
}

.npc-table-section-bottom-a {
    background-color: #F4878A;
    width: 20%;
}

.npc-table-section-bottom-b {
    background-color: #FDEDEE;
    width: 20%;
}

.npc-table-section-bottom-c {
    background-color: #92C9CE;
    width: 20%;
}

.npc-table-section-bottom-d {
    background-color: #E7EFF1;
    width: 40%;
}

.add-crit-die {
    font-size: xx-small;
    background-color: #E7EFF1;
}

.npc-details {
    width: 99%;
}

.npc-always-whisper-roll {
    position: absolute;
    right: 0px;
}

/* GM Sheet styling
    ============================= */
.gm-container {
    padding: 10px;
}

input.gmtab1:checked + .gmtab1,
input.gmtab2:checked + .gmtab2 {
    background: var(--selected-item-bg-color);
    color: var(--selected-item-text-color);
    border-radius: 2px;
    border: transparent;
}

input.gmtab1:not(:checked) ~ span.gmCharacterDetails,
input.gmtab2:not(:checked) ~ span.gmHistory {
    display: none;
}

input.gmtab1:checked ~ span.gmCharacterDetails,
input.gmtab2:checked ~ span.gmHistory {
    display: block;
    background-color:var(--main-bg-color);
    padding: 5px;
}

.gmpc-label {
    margin: 10px 0 0 0;
    width: 98%;
}

.lp {
    padding-right: 49px;
}

.gmpcLifepoints {
    justify-content: flex-start;
    align-items: center;
}

.lifepointsHeader {
    width: 207px;
}

.gmpc-repeatingName {
    font-size: 1.1em;
    font-weight: normal;
    cursor: pointer;
    margin-top: 5px;
    position: relative;
    right: 20px;
}

.gmpc-repeatingLabel {
    margin-top: 5px;
    margin-bottom: 0;
}

.gmpcNameInput {
    width: 300px;
}

.benedictionUsed {
    opacity: 0;
}

input.benedictionUsed:checked + span.gmpc-repeatingName {
    text-decoration: line-through;
    opacity: .5;
}

.reveilName {
    display: inline-block;
    min-width: 50%;
    max-width: 50%;
    font-size: 1.2em;
    margin-top: 5px;
}

.protectedTravelers {
    height: 75px;
}

.historyTales {
    display: grid;
    grid-template-columns: 40% 15% 45%;
    grid-template-rows: 1fr;
}

.scenarioName { grid-area: 1 / 1 / 2 / 2; }
.scenarioDate  { grid-area: 1 / 2 / 2 / 3; }
.scenarioTravelers { grid-area: 1 / 3 / 2 / 4; }

input.historyInput {
    max-width: unset;
    width: 98%;
}

.repcontainer[data-groupname='repeating_reveils'],
.repcontainer[data-groupname='repeating_benedictions'] {
    padding-bottom: 20px;
}

/* Dark Mode
============================= */

body.sheet-darkmode .charsheet{
    --main-bg-color: #1f1f1f;
    --header-bg-color: #353535;
    --header-text-color: #e6e6e6;
    --selected-item-bg-color: #666666;
    --selected-item-text-color: #e6e6e6;
    --unselected-item-bg-color: #333333;
    --unselected-item-text-color: #b3b3b3;
    --divider-color: lightgray;
    --icon-bg-color: #88394d;
    --input-bg-color: #000;
    --input-text-color: #fff;
 }

body.sheet-darkmode button,
body.sheet-darkmode input,
body.sheet-darkmode optgroup,
body.sheet-darkmode select,
body.sheet-darkmode textarea,
body.sheet-darkmode .charsheet {
    background-color: #1f1f1f;
	color: #eee
}

body.sheet-darkmode .btn,
body.sheet-darkmode .btn.btn-default {
	color: #c8c3bc;
	text-shadow: rgba(24,26,27,.75) 0px 1px 1px;
	background-color: #1e2021;
	background-image: linear-gradient(#181a1b, #26292b);
	border-color: #3e4446 #3e4446 #43494c;
	box-shadow: rgba(24,26,27,.2) 0px 1px 0px inset,rgba(0,0,0,.05) 0px 1px 2px
}

body.sheet-darkmode .npc-sheet-container * {    background-color: #1f1f1f;}
body.sheet-darkmode .npc-table-section-top-left {    background-color: #7B6077;}
body.sheet-darkmode .npc-table-section-top-right {    background-color: #9F986E;}
body.sheet-darkmode .npc-table-section-bottom-a {    background-color: #9B5456;}
body.sheet-darkmode .npc-table-section-bottom-b {    background-color: #8A7F80;}
body.sheet-darkmode .npc-table-section-bottom-c {    background-color: #395E62;}
body.sheet-darkmode .npc-table-section-bottom-d {    background-color: #8E989B;}

body.sheet-darkmode .repcontrol_add,
body.sheet-darkmode .repcontrol_edit {
    background: transparent none repeat scroll 0% 0%;
    border: medium none;
    box-shadow: none;
    color: var(--main-bg-color)
}

.sheet-rolltemplate-skillCheck .sheet-rollTitle,
.sheet-rolltemplate-accuracyCheck .sheet-rollTitle,
.sheet-rolltemplate-oneDieCheck .sheet-rollTitle {
    color: #e6e6e6;
}

.sheet-rolltemplate-darkmode .sheet-rolltemplate-skillCheck .sheet-rollTitle,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-oneDieCheck .sheet-rollTitle,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-accuracyCheck .sheet-rollTitle {background-color:#68654c;}
.sheet-rolltemplate-darkmode .sheet-rolltemplate-skillCheck .sheet-rollTitle.sheet-Spring,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-oneDieCheck .sheet-rollTitle.sheet-Spring,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-accuracyCheck .sheet-rollTitle.sheet-Spring {background-color:#207747;}
.sheet-rolltemplate-darkmode .sheet-rolltemplate-skillCheck .sheet-rollTitle.sheet-Summer,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-oneDieCheck .sheet-rollTitle.sheet-Summer,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-accuracyCheck .sheet-rollTitle.sheet-Summer {background-color:#b67900;}
.sheet-rolltemplate-darkmode .sheet-rolltemplate-skillCheck .sheet-rollTitle.sheet-Fall,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-oneDieCheck .sheet-rollTitle.sheet-Fall,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-accuracyCheck .sheet-rollTitle.sheet-Fall {background-color:#572124;}
.sheet-rolltemplate-darkmode .sheet-rolltemplate-skillCheck .sheet-rollTitle.sheet-Winter, 
.sheet-rolltemplate-darkmode .sheet-rolltemplate-oneDieCheck .sheet-rollTitle.sheet-Winter, 
.sheet-rolltemplate-darkmode .sheet-rolltemplate-accuracyCheck .sheet-rollTitle.sheet-Winter {background-color:#1f596d;}


.sheet-rolltemplate-darkmode .sheet-rolltemplate-skillCheck .inlinerollresult,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-accuracyCheck .inlinerollresult,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-oneDieCheck .inlinerollresult {
    background-color: #353535;
    border: #353535;
    color: #e6e6e6;
}

.sheet-rolltemplate-darkmode .sheet-rolltemplate-skillCheck .inlinerollresult.fullfail,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-accuracyCheck .inlinerollresult.fullfail,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-oneDieCheck .inlinerollresult.fullfail{
    border: 2px solid #E1757B;
}

.sheet-rolltemplate-darkmode .sheet-rolltemplate-skillCheck .inlinerollresult.fullcrit,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-accuracyCheck .inlinerollresult.fullcrit,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-oneDieCheck .inlinerollresult.fullcrit{
    border: 2px solid #48BD7D;
}

.sheet-rolltemplate-darkmode .sheet-container,
.sheet-rolltemplate-darkmode .sheet-rollResult {
    color: #b3b3b3;
    background-color: #353535;
}

.sheet-rolltemplate-darkmode .sheet-rolltemplate-skillCheck .sheet-critical,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-accuracyCheck .sheet-critical {
    color:#48BD7D;
}

.sheet-rolltemplate-darkmode .sheet-rolltemplate-skillCheck .sheet-fumble,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-accuracyCheck .sheet-fumble {
    color:#E1757B;
}

.sheet-rolltemplate-darkmode .sheet-rolltemplate-spellAttrText a[href^="~"],
.sheet-rolltemplate-darkmode .sheet-rolltemplate-spellAttrText a[href^="!"],
.sheet-rolltemplate-darkmode .sheet-rolltemplate-spellAttrText,
.sheet-rolltemplate-darkmode .sheet-rolltemplate-spellEffect {
    background-color: #575862;
    color: #e6e6e6;
}

.sheet-rolltemplate-darkmode .sheet-rolltemplate-spellEffect {
    background-color: #1f1f1f;
}

.sheet-rolltemplate-darkmode .sheet-rolltemplate-spellTitle {
    background-color: #2c3f68;
    color: #e6e6e6;
}