/* Sword World 2.5 style */

@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Jim+Nightshade&display=swap');

body .charsheet * {
    font-family: 'Noto Sans', serif;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    display: none;
    
}
input[type=number] {
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield;
    
}

body .charsheet .repitem .itemcontrol {
    z-index: 99;
}
body .charsheet .repitem .itemcontrol > * {
    font-size: 8px;
    padding: 0 10px;
}

body .charsheet sub {
    bottom: unset;
}

.charsheet h1 {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/sword-world-dev/Sword%20World/images/logo.png') left top no-repeat;
    background-size: contain;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    text-indent: -9999px;
}

.charsheet label,
.label {
    font-size: 10px;
	display: inline-block;
	width: 100%;
    line-height: 20px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-align: left;
    vertical-align: middle;
    text-transform: uppercase;
    color: black;
    border-radius: 0;
    white-space: unset;
}
body .charsheet div .grid input,
body .charsheet div .grid input[type=number],
.charsheet select,
.input  {
    font-size: 14px;
	display: inline-block;
	width: 100%;
    height: 20px;
    border: none;
    border-bottom: solid 1px black;
    border-radius: 0;
    padding: 0 5px;
    margin: 0;
    box-sizing: border-box;
    background: none;
    color: black;
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
    outline: none;
    overflow: hidden;
}
.input {
    cursor: default;
}
body .charsheet div .grid input.lrg,
body .charsheet div .grid input[type=number].lrg,
.charsheet select.lrg,
.input.lrg  {
    font-size: 20px;
    min-height: 30px;
}

body .charsheet select {
    background: white;
    appearance: none;
    box-shadow: none;
}

.charsheet .flex {
    display: flex;
    margin: 0;
    padding: 0;
    gap: 10px;
}
.charsheet .flex.lrg {
    width: fit-content;
    place-self: center;
}
.charsheet .grid,
.repcontainer,
.repitem {
    display: grid;
    margin: 0;
    padding: 0;
    grid-auto-rows: minmax(min-content, max-content);
    gap: 10px;
}
.repitem {
    height: 20px;
}
.charsheet .smrowgap {
    column-gap: 0px;
    row-gap: 5px;
}
.charsheet .nogap {
    gap: 0px;
}
.col2 {
    grid-template-columns: repeat(2, 1fr);
}
.col2-main {
    grid-template-columns: 2fr 3fr;
    column-gap: 20px;
}
.col2-guild,
.repeating_consumables ~ .repcontainer .repitem {
    grid-template-columns: 2fr 1fr;
}
.col2-guild .col2 {
    grid-template-columns: 3fr 1fr;
}
.col2-failures {
    grid-template-columns: 1fr 5fr;
}
.col2-failures .grid {
    grid-template-columns: repeat(5, 2fr) 3fr repeat(4, 2fr) 3fr repeat(5, 2fr);
}
.col2-header {
    grid-template-columns: 2fr 1fr;
}
.col2-classpack {
    grid-template-columns: 2fr 3fr;
}
.col2-classes {
    grid-template-columns: 3fr 1fr;
}
.col2-feats {
    grid-template-columns: 1fr 11fr;
}
.col2-locdef {
    grid-template-columns: 5fr 6fr;
}
.col2-mageva {
    grid-template-columns: 6fr 5fr;
}
.col2-locations {
    grid-template-columns: 1fr 5fr;
}
.col2-evasion {
    grid-template-columns: 5fr 4fr;
}
.col2-monitems {
    grid-template-columns: 1fr 2fr;
}
.col2-fellowtop {
    grid-template-columns: 4fr 2fr;
}
.col3 {
    grid-template-columns: repeat(3, 1fr);
}
.col3-languages {
    grid-template-columns: 6fr 1fr 1fr;
}
.col3-workskills {
    grid-template-columns: 2fr 2fr 1fr;
}
.col3-race {
    grid-template-columns: 3fr 1fr 2fr;
}
.col3-packages {
    grid-template-columns: 3fr 2fr 98px;
}
.col3-accdmg {
    grid-template-columns: 5fr 9fr 219px;
}
.col3-title {
    grid-template-columns: 1fr 8fr 3fr;
}
.repeating_monsterloot ~ .repcontainer .repitem {
    grid-template-columns: 2fr 7fr 1fr;
}
.col3-fellowname {
    grid-template-columns: 130px 4fr 90px;
}
.col4 {
    grid-template-columns: repeat(4, 1fr);
}
.col4-xp {
    grid-template-columns: 5fr 3fr 2fr 1fr;
}
.col4-armor,
.repeating_armor ~ .repcontainer .repitem {
    grid-template-columns: 5fr 1fr 1fr 1fr;
}
.col4-stats2 {
    grid-template-columns: 2fr 13fr 1fr 7fr;
}
.col4-sections {
    grid-template-columns: 1fr 8fr 2fr 5fr;
}
.col5 {
    grid-template-columns: repeat(5, 1fr);
}
.col5-abilities {
    grid-template-columns: 3fr 3fr 3fr 5fr 98px;
}
.col6 {
    grid-template-columns: repeat(6, 1fr);
}
.col6-stats3 {
    grid-template-columns: 1fr 2fr 1fr 2fr 2fr 12fr;
}
.col6-fellowactions {
    grid-template-columns: 1fr 1fr 3fr 3fr 1fr 4fr;
}
.col7 {
    grid-template-columns: repeat(7, 1fr);
}
.col7-sections,
.repeating_monstersections ~ .repcontainer .repitem {
    grid-template-columns: 3fr 2fr 2fr 2fr 1fr 2fr 2fr;
}
.col7-felloweffect {
    grid-template-columns: 2fr 1fr 3fr 1fr 1fr 1fr 1fr;
}
.col8 {
    grid-template-columns: repeat(8, 1fr);
}
.col8-initmove {
    grid-template-columns: 3fr 3fr 3fr 3fr 2fr 73px 73px 73px;
}
.col8-stats1 {
    grid-template-columns: 3fr 3fr 3fr 6fr 3fr 3fr 2fr 1fr;
}
.col8-stats4 {
    grid-template-columns: 1fr 1fr 2fr 2fr 1fr 2fr 1fr 2fr;
}
.col13,
.repeating_powertable ~ .repcontainer .repitem {
    grid-template-columns: repeat(13, 1fr);
}
.col-weapons,
.repeating_weapons ~ .repcontainer .repitem {
    grid-template-columns: 7fr 4fr 2fr 2fr 2fr 3fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr 2fr 3fr;
}
.slot1 {
    grid-column: 1;
}
.slot2 {
    grid-column: 2;
}
.slot3 {
    grid-column: 3;
}
.slot4 {
    grid-column: 4;
}
.span2 {
    grid-column: span 2;
}
.span2.slot1 {
    grid-column: 1 / span 2;
}
.span3 {
    grid-column: span 3;
}
.span4 {
    grid-column: span 4;
}
.vspan2 {
    grid-row: span 2;
}
.vcol {
    grid-template-rows: 20px auto;
    grid-auto-flow: column;
}

/* disable autofill */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    position: absolute;
    right: 0;
}

/* slider */
body .charsheet div .switch {
    background: none;
    border: none;
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 5px;
    right: 0;
    bottom: 0;
    background-color: darkgray;
    border-radius: 20px;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: '';
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider {
    background-color: black;
}
.injury + .switch input:checked + .slider {
    background-color: black;
}
input:focus + .slider {
    border: solid 1px gold;
}
input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

/* autoexpand */
.auto-expand {
	position: relative;
	cursor: text;
	word-wrap: break-word;
    min-height: 20px;
    width: 100%;
}
.auto-expand.tall {
    min-height: 100px;
}
.auto-expand span {
	visibility: hidden;
	white-space: pre-wrap;
	display: block;
    line-height: 20px;
}
.auto-expand textarea {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	margin: 0;
	overflow: hidden;
	resize: none;
    line-height: 20px;
	height: 100%;
	width: 100%;
	display: block;
	box-sizing: border-box;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	letter-spacing: inherit;
	padding: inherit;
	text-align: inherit;
	text-transform: inherit;
}
.auto-expand.lrg span,
.auto-expand.lrg textarea {
    font-size: 20px;
}
.auto-expand.quote span,
.auto-expand.quote textarea {
    font-style: italic;
}

.col2-header .auto-expand textarea {
    border-bottom: solid 1px black;
}

/* radio stuff */
.charsheet .grid input[type='radio'] {
    -webkit-appearance: none;
    appearance: none;
    background: white;
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: solid 1px black;
    display: grid;
    place-content: center;
}
.charsheet .grid input[type='radio']:before {
    content: '';
    width: 8px;
    height: 8px;
    transform: scale(1);
    transition: 120ms transform ease-in-out;
    background: black;
    line-height: 8px;
    font-size: 10px;
}
.charsheet .grid input[type='radio'].standard:before {
    transform: scale(0);
}
.charsheet .grid input[type='radio'].standard:checked:before {
    transform: scale(1);
}
.charsheet .grid input[type='radio']:checked ~ input[type='radio']:before {
    transform: scale(0);
}
.charsheet .grid input[type='radio']:not(.standard):first-child {
    border: none;
    background: none;
    transform: none;
}
.charsheet .grid input[type='radio']:not(.standard):first-child:before {
    background: none;
}
.charsheet .grid input[type='radio']:not(.standard):first-child:hover:before {
    content: '✖';
}

/* checkbox stuff */
.charsheet .grid .input.check-yes,
.charsheet .grid .input.check-na,
.charsheet .grid input[type='checkbox'] {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    display: grid;
    place-content: center;
}
.charsheet .grid input[type='checkbox']:before {
    transition: 120ms all ease-in-out;
    content: '';
}
.charsheet .grid input[type='checkbox']:hover:before {
    color: gold;
}
.charsheet .grid input[type='checkbox']:hover:before,
.charsheet .grid input[type='checkbox']:checked:before {
    content: '◯';
}
.charsheet .grid input[type='checkbox']:checked:hover:before {
    content: '✖';
}
.charsheet .grid input[type=checkbox].standard {
    background: white;
    width: 10px;
    height: 10px;
    border: solid 1px black;
}
.charsheet .grid input[type=checkbox].standard:hover:before,
.charsheet .grid input[type=checkbox].standard:before {
    content: '';
    width: 8px;
    height: 8px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background: black;
    line-height: 8px;
}
.charsheet .grid input[type='checkbox'].standard:checked:hover:before,
.charsheet .grid input[type='checkbox'].standard:checked:before {
    content: '';
    transform: scale(1);
}

/* tabs */
.tabs {
    display: flex;
    margin: 0 -20px 10px -20px;
    padding: 0 20px;
    border-bottom: solid 1px black;
}
.tabs div {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.tabs button {
    background: whitesmoke;
    height: 30px;
    padding: 5px 15px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
    color: silver;
}
.tabs button:hover {
    background: gold;
    color: white;
}
.toggle-tabs[value='page1'] ~ .tabs div.tab-page1 button,
.toggle-tabs[value='page2'] ~ .tabs div.tab-page2 button,
.toggle-tabs[value='monster'] ~ .tabs div.tab-monster button,
.toggle-tabs[value='fellow'] ~ .tabs div.tab-fellow button,
.toggle-tabs[value='settings'] ~ .tabs div.tab-settings button {
    background: darkgray;
    color: white;
}

.charactersheet .toggle-monster:not([value='0']) ~ .tabs div.tab-page1,
.charactersheet .toggle-monster:not([value='0']) ~ .tabs div.tab-page2,
.charactersheet .toggle-monster:not([value='1']) ~ .tabs div.tab-monster,
.charactersheet .toggle-monster:not([value='2']) ~ .tabs div.tab-fellow,
.charactersheet .toggle-monster:not([value='0']) ~ div .monster0,
.charactersheet .toggle-monster:not([value='1']) ~ div .monster1,
.charactersheet .toggle-monster:not([value='2']) ~ div .monster2,
.charactersheet .toggle-sw20:not([value='1']) ~ div .sw20-class,
.charactersheet .toggle-aog:not([value='1']) ~ div .aog-class,
.charactersheet .toggle-workskills:not([value='1']) ~ div .workskills {
    display: none;
}

body .charactersheet .page1,
body .charactersheet .page2,
body .charactersheet .monster,
body .charactersheet .fellow,
body .charactersheet .settings {
    display: none;
}
body .charactersheet .page1:after,
body .charactersheet .page2:after,
body .charactersheet .monster:after,
body .charactersheet .fellow:after,
body .charactersheet .settings:after {
    content: 'Sword World 2.5 Character Sheet Ver.0.177.2 | https://app.roll20.net/users/39343/miriable';
    text-align: right;
    font-size: 8px;
}
body .charactersheet .page1:after {
    grid-column: span 2;
}
body .charactersheet .settings:after {
    grid-column: span 4;
}
body .toggle-tabs[value='page1'] ~ div.page1,
body .toggle-tabs[value='page2'] ~ div.page2,
body .toggle-tabs[value='monster'] ~ div.monster,
body .toggle-tabs[value='fellow'] ~ div.fellow,
body .toggle-tabs[value='settings'] ~ div.settings {
    display: grid;
}
.charactersheet .toggle-monster:not([value='0']) ~ .tabs .roller {
    display: none;
}
body .charsheet .tabs .roller {
    flex: 1;
    text-align: right;
}
body .charsheet .tabs .roller button,
.page1 .repeating_workskills ~ .repcontainer .repitem button[type=action],
body .charsheet .monster div:not(.repcontrol) > button,
.fellow .col6-fellowactions button {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
}
body .charsheet .tabs .roller button {
    border-left: solid 1px black;
    border-right: solid 1px black;
    padding: 0 5px;
    height: 100%;
}
body .charsheet .tabs .roller button:before,
.page1 .repeating_workskills ~ .repcontainer .repitem button[type=action]:before,
body .charsheet .monster div:not(.repcontrol) > button:before,
.fellow .col6-fellowactions button:before {
    content: 'F';
    font-family: 'dicefontd6';
    color: black;
}
.fellow .col6-fellowactions .header button:before {
    color: white;
}
body .charsheet .tabs .roller button:hover:before,
.page1 .repeating_workskills ~ .repcontainer .repitem button[type=action]:hover:before,
body .charsheet .monster div:not(.repcontrol) > button:hover:before,
.fellow .col6-fellowactions button:hover:before {
    color: gold;
}
/* end tabs */

.charsheet .header {
    background: black;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    height: 20px;
    line-height: 20px;
}

.charsheet .footnote {
    font-size: 9px;
    line-height: unset;
    text-align: center;
}
.charsheet .settings .footnote {
    text-align: left;
}

.charsheet *:not(label).refmark {
    font-size: 10px;
    line-height: unset;
}
.charsheet .refmark:before {
    content: '※';
    font-family: cursive;
}

.guild {
    position: relative;
    border: 20px solid transparent;
    padding: 10px;
    border-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/sword-world-dev/Sword%20World/images/border.png') 65 stretch;
}
.page1 .guild:before {
    content: '';
    position: absolute;
    background: white;
    right: -20px;
    bottom: -20px;
    width: 30px;
    height: 30px;
}
.guild .alevel {
    position: relative;
}
body .charsheet .guild .alevel label {
    position: absolute;
    top: 40px;
    right: -12px;
    text-align: center;
    z-index: 1;
}
body .charsheet .guild .alevel .input {
    position: absolute;
    right: -25px;
    bottom: -25px;
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/sword-world-dev/Sword%20World/images/circle.png') center center no-repeat;
    background-size: contain;
    border: none;
    width: 120px;
    height: 120px;
    line-height: 150px;
    text-align: center;
    font-size: 24px;
}

body .charsheet .profile {
    position: relative;
    border: solid 1px black;
    padding: 10px;
}
body .charsheet .profile > .label {
    position: absolute;
    top: -12px;
    left: 10px;
}
body .charsheet .col2-failures > label {
    line-height: unset;
}
.col2-failures .grid {
    place-content: center;
}

body .charsheet .grid.lined > .grid > *,
body .charsheet .grid.lined .repcontainer .repitem > div {
    outline: solid 1px black;
    box-sizing: border-box;
    height: 20px;
}
body .charsheet .grid.lined > .grid > *.vspan2,
body .charsheet .grid.lined .repcontainer .repitem > div.vspan2 {
    height: 40px;
}
body .charsheet .grid.lined.single > *:not(.repcontrol) {
    border: none;
    border-left: solid 1px black;
    border-right: solid 1px black;
    box-sizing: border-box;
}
body .charsheet .grid.lined.single > *:not(.repcontrol):nth-child(2) {
    border-top: solid 1px black;
}
body .charsheet .grid.lined.single > *:nth-last-child(2) {
    border-bottom: solid 1px black;
}
body .charsheet .grid.lined.single > .grid > *,
body .charsheet .grid.lined.single .repcontainer .repitem > div {
    outline: none;
}
body .charsheet .grid.lined.single > .grid > * {
    border-top: solid 1px black;
}
body .charsheet .grid.lined > .grid > *:not(.header),
body .charsheet .grid.lined .repcontainer .repitem > div:not(.itemcontrol) {
    position: relative;
    background: white;
}
body .charsheet div .grid.lined input,
body .charsheet div .grid.lined input[type=number],
body .charsheet div .grid.lined .input {
    border: none;
}
.check-yes:before {
    content: '◯';
}
.check-na:before {
    content: '─';
}
body .charsheet .grid.lined .repcontainer {
    gap: 0;
}
body .charsheet .grid.lined .repcontainer .repitem {
    gap: 0;
}
body .charsheet .grid.lined .repcontainer .repitem input[type='checkbox']:before {
    content: '─';
}
body .charsheet .grid.lined .repcontainer .repitem input[type='checkbox']:hover:before,
body .charsheet .grid.lined .repcontainer .repitem input[type='checkbox']:checked:before {
    content: '◯';
}
body .charsheet .grid.lined .repcontainer .repitem input[type='checkbox']:checked:hover:before {
    content: '✖';
}
body .charsheet .grid.lined label,
body .charsheet .grid.lined .label {
    padding: 0 2px;
}

body .charsheet .col3-languages *:nth-child(3n+2),
body .charsheet .col3-languages *:nth-child(3n+3),
.repeating_workskills ~ .repcontainer .repitem input[type=number] {
    text-align: center;
}
.repeating_languages ~ .repcontainer .repitem {
    grid-template-columns: 6fr 1fr 1fr;
}
.repeating_workskills ~ .repcontainer .repitem {
    grid-template-columns: 2fr 2fr 1fr;
}
body .charsheet .grid.lined .repeating_workskills ~ .repcontainer .repitem > div:not(.itemcontrol) {
    position: unset;
}

.profile > .label,
.col5-abilities > * label,
body .charsheet .box + div:not(.stretch) > div:nth-child(even) label,
body .charsheet .boxstat:not(.nogap) > label,
body .charsheet .boxstat .label {
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white,
        0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white,
        0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white,
        0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white,
        0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white,
        0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white,
        0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white,
        0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white;
}

.col2-guild .grid.vcol label {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, 1fr);
}
.col2-guild .grid.vcol label:after {
    content: 'Grade';
    text-align: right;
}
.col2-guild .grid.vcol:first-child label:after {
    content: 'Points';
}

.charsheet .col5-abilities .header {
    margin-bottom: 5px;
}
.charsheet .grid .col5-abilities {
    gap: 5px;
}
.charsheet .grid .col5-abilities.shaded {
    background: linear-gradient(90deg, white 79%, gainsboro 79%);
    padding: 5px 0;
    gap: 10px;
}
.col5-abilities.shaded > * {
    position: relative;
    border: solid 1px black;
    background: white;
}
.col5-abilities.shaded > *:nth-child(9n+1),
.col5-abilities.shaded > *:nth-child(9n+2),
.col5-abilities.shaded > *:nth-child(9n+6) {
    margin-right: 5px;
}
.col5-abilities.shaded > *:nth-child(9n+2),
.col5-abilities.shaded > *:nth-child(9n+6),
.col5-abilities.shaded > *:nth-child(9n+3),
.col5-abilities.shaded > *:nth-child(9n+7) {
    margin-left: 5px;
}
.col5-abilities.shaded > *:nth-child(9n+4),
.col5-abilities.shaded > *:nth-child(9n+8) {
    margin-left: 10px;
}
.col5-abilities.shaded > *:nth-child(9n+5),
.col5-abilities.shaded > *:nth-child(9n+9) {
    border: solid 2px black;
    margin-right: 10px;
}
body .charsheet .col5-abilities > div input[type=number],
body .charsheet .col5-abilities > div .input {
    border: none;
    height: 35px;
    line-height: 35px;
    text-align: center;
}
body .charsheet .col5-abilities > div.vspan2 input[type=number] {
    height: 80px;
}
.col5-abilities > * label {
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    width: min-content;
    margin: auto;
}
.col5-abilities.shaded > *:not(.vspan2):before {
    content: '+';
    position: absolute;
    left: -15px;
    bottom: 0;
}
.col5-abilities.shaded > *:nth-child(9n+4):before,
.col5-abilities.shaded > *:nth-child(9n+8):before {
    content: '=';
}
.col5-abilities.shaded > *:nth-child(9n+5):before,
.col5-abilities.shaded > *:nth-child(9n+9):before {
    content: ' ';
    border-bottom: solid 3px black;
    left: -12px;
    width: 10px;
    height: 10px;
}
.col5-abilities.shaded > *:nth-child(9n+3) label,
.col5-abilities.shaded > *:nth-child(9n+7) label {
    font-family: 'dicefontd6';
    left: unset;
    top: unset;
    bottom: 2px;
    right: 2px;
    text-shadow: none;
    text-transform: unset;
    font-size: 14px;
}
.col5-abilities.shaded > *:nth-child(9n+5) label,
.col5-abilities.shaded > *:nth-child(9n+9) label {
    top: -2px;
    left: 2px;
    right: unset;
    text-shadow: none;
    text-transform: unset;
}
.charsheet .classes {
    position: relative;
    border: solid 1px black;
    background: linear-gradient(90deg, white 74%, black 74%, black 74.5%, white 74.5%);
}
.charsheet .classes > input[type=checkbox] {
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
}
.charsheet .classes > input[type=checkbox]:before {
    font-family: 'Pictos';
    color: white;
}
.charsheet .classes > input[type='checkbox']:hover:before,
.charsheet .classes > input[type=checkbox]:before {
    content: '_';
}
.charsheet .classes > input[type='checkbox']:checked:hover:before,
.charsheet .classes > input[type='checkbox']:checked:before {
    content: '&';
}
.col2-classes {
    padding: 5px
}
body .charsheet .col2-classes div {
    box-sizing: border-box;
    height: 20px;
}
body .charsheet .col2-classes div input[type=number],
body .charsheet .col2-classes .input {
    border: none;
}
body .charsheet .col2-classes div input[type=number] {
    text-align: center;
}
body .charsheet .toggle-class[value='1'] ~ .col2-classes .toggle-class[value='0'] + div,
body .charsheet .toggle-class[value='1'] ~ .col2-classes .toggle-class[value='0'] + div + div {
    display: none;
}
.col3-packages {
    background: linear-gradient(90deg, white 64%, gainsboro 64%);
    height: min-content;
}
.col3-packages > div:nth-child(1),
.col3-packages > div:nth-child(2) {
    background: white;
    margin-bottom: 5px;
}
.col3-packages > div:nth-child(2) {
    font-size: 10px;
}
.col3-packages > div:nth-child(3),
.col3-packages > div:nth-child(4) {
    margin-bottom: 10px;
}

body .charsheet .box {
    position: relative;
    border: solid 1px black;
    padding: 2px 2px 10px 2px;
    grid-template-columns: 5fr 1fr;
}
body .charsheet .box.wide {
    grid-template-columns: 5fr 1fr 5fr 1fr;
}
body .charsheet .box label {
    position: relative;
    margin-left: 14px;
}
body .charsheet .box label:before {
    position: absolute;
    content: '';
    background: black;
    border: solid 1px black;
    width: 10px;
    height: 10px;
    top: 4px;
    left: -14px;
}
body .charsheet .box .class-level[value='0'] + label:before {
    background: none;
}
body .charsheet .box .class-level[value='0'] + label + span {
    visibility: hidden;
}
body .charsheet .box span {
    text-align: right;
}
body .charsheet .box:after {
    position: absolute;
    content: 'Class Levels';
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 10px;
}
body .charsheet .box + div div:nth-child(odd) {
    position: relative;
    height: fit-content;
    line-height: 20px;
    padding-left: 10px;
    font-size: 10px;
}
body .charsheet .box + div div:nth-child(odd):before {
    position: absolute;
    content: '+';
    top: 0;
    left: 2px;
}
body .charsheet .box + div div:nth-child(odd):after {
    position: absolute;
    content: '=';
    bottom: 0;
    right: -6px;
}
body .charsheet .box + div.nogap div:nth-child(odd):after {
    right: 4px;
}
body .charsheet .box + div > div:nth-child(even),
body .charsheet .boxstat {
    position: relative;
    background: white;
    border: solid 2px black;
    margin-right: 10px;
    place-content: center;
}
body .charsheet .boxstat:not(.black) {
    border: solid 1px black;
}
body .charsheet .boxstat.total,
body .charsheet .boxstat.total + .boxstat,
body .charsheet *:not(.nogap) > .boxstat {
    margin: 0;
}
body .charsheet .boxstat.total label {
    z-index: 1;
}
body .charsheet .boxstat.nogap {
    margin-right: 0;
    place-content: unset;
}
body .charsheet .boxstat.nogap:before {
    position: absolute;
    content: '';
    background: white;
    top: -2px;
    left: 0;
    margin: 0 10px;
    width: calc(100% - 20px);
    height: calc(100% + 4px);
}
body .charsheet .boxstat.nogap > * {
    z-index: 1;
    padding: 0 10px;
}
body .charsheet .boxstat.move:after {
    position: absolute;
    content: 'm';
    bottom: 0;
    right: 2px;
    font-size: 10px;
}
body .charsheet .boxstat.move + .move + .move {
    margin-left: 10px;
    margin-right: 0;
}
body .charsheet .boxstat.move + .move + .move:before {
    position: absolute;
    content: 'x3=';
    bottom: 0;
    left: -19px;
    font-size: 10px;
}
body .charsheet .box + div.nogap > div:nth-child(2n+4) {
    border-top: none;
}
body .charsheet .box + div > div:nth-child(even) button.input,
body .charsheet .box + div > div:nth-child(even) button.input:hover,
body .charsheet div .grid div.magic-circle button.input,
body .charsheet div .grid div.magic-circle button.input:hover,
body .charsheet div .grid div.boxstat.total button.input,
body .charsheet div .grid div.boxstat.total button.input:hover,
body .charsheet div .grid div.boxstat.black button.input,
body .charsheet div .grid div.boxstat.black button.input:hover,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(9) button.input,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(9) button.input:hover,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(24) button.input,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(24) button.input:hover {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    background: none;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    cursor: pointer;
}
body .charsheet .box + div > div:nth-child(even) button:before,
body .charsheet div .grid div.magic-circle button:before,
body .charsheet div .grid div.boxstat.total button:before,
body .charsheet div .grid div.boxstat.black button:before,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(9) button:before,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(24) button:before {
    content: 'F';
    font-family: 'dicefontd6';
    position: absolute;
    right: 0;
    top: 0;
    display: grid;
    align-items: center;
    height: 100%;
    text-shadow: none;
    font-size: 17px;
}
body .charsheet div .grid div.magic-circle button:before {
    right: 4px;
}
body .charsheet div .grid div.boxstat.total button:before,
body .charsheet div .grid div.boxstat.black button:before,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(9) button:before,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(24) button:before {
    right: 8px;
}
body .charsheet .box + div > div:nth-child(even) button:hover:before,
body .charsheet div .grid div.magic-circle button:hover:before,
body .charsheet div .grid div.boxstat.total button:hover:before,
body .charsheet div .grid div.boxstat.black button:hover:before,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(9) button:hover:before,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(24) button:hover:before {
    color: gold;
}
body .charsheet .box + div > div:nth-child(even) label,
body .charsheet .boxstat > label {
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    width: auto;
    line-height: 100%;
    margin: auto;
    text-align: center;
}
body .charsheet .box.wide + div.stretch > div:nth-child(even) {
    grid-template-columns: 1fr 1fr;
    place-content: center;
}
body .charsheet .box.wide + div.stretch > div:nth-child(even) label,
body .charsheet .boxstat.nogap label {
    position: unset;
    width: auto;
    height: auto;
    margin: 0 5px;
    line-height: 100%;
    text-align: left;
}
body .charsheet .boxstat .label.rotate {
    position: absolute;
    top: 0;
    bottom: 0;
    text-align: center;
    writing-mode: vertical-rl;
    left: -10px;
    width: fit-content;
}
body .charsheet div.grid .boxstat input,
body .charsheet div.grid .boxstat input[type=number] {
    border: none;
}
body .charsheet .boxstat > div.col2 {
    grid-template-columns: 4fr 1fr;
}
body .charsheet .boxstat > div.col2 div:last-child input {
    text-align: center;
}
body .charsheet .boxstat > div.col2 div:last-child:before {
    content: '+';
    margin: -5px;
}
body .charsheet .box + div > div:nth-child(even) .input,
body .charsheet div .boxstat input[type=number],
body .charsheet .boxstat .input {
    border: none;
    height: 35px;
    line-height: 35px;
    text-align: center;
}
body .charsheet .box.wide + div.stretch > div:nth-child(even) .input {
    height: auto;
    line-height: 100%;
}
body .charsheet .box + div {
    grid-template-columns: auto 98px;
}
body .charsheet .box.wide + div {
    grid-template-columns: 2fr 5fr;
    grid-auto-rows: auto;
}

body .col2-feats .header {
    text-align: left;
    padding-left: 5px;
}
.adventurer-level[value='1'] ~ .grid .col2-feats *:nth-child(1n+5),
.adventurer-level[value='2'] ~ .grid .col2-feats *:nth-child(1n+5),
.adventurer-level[value='3'] ~ .grid .col2-feats *:nth-child(1n+7),
.adventurer-level[value='4'] ~ .grid .col2-feats *:nth-child(1n+7),
.adventurer-level[value='5'] ~ .grid .col2-feats *:nth-child(1n+9),
.adventurer-level[value='6'] ~ .grid .col2-feats *:nth-child(1n+9),
.adventurer-level[value='7'] ~ .grid .col2-feats *:nth-child(1n+11),
.adventurer-level[value='8'] ~ .grid .col2-feats *:nth-child(1n+11),
.adventurer-level[value='9'] ~ .grid .col2-feats *:nth-child(1n+13),
.adventurer-level[value='10'] ~ .grid .col2-feats *:nth-child(1n+13),
.adventurer-level[value='11'] ~ .grid .col2-feats *:nth-child(1n+15),
.adventurer-level[value='12'] ~ .grid .col2-feats *:nth-child(1n+15),
.adventurer-level[value='13'] ~ .grid .col2-feats *:nth-child(1n+17),
.adventurer-level[value='14'] ~ .grid .col2-feats *:nth-child(1n+17),
.adventurer-level[value='15'] ~ .grid .col2-feats *:nth-child(1n+19) {
    display: none;
}

/* page 2 */
.col8-initmove .box + .col2 {
    grid-auto-rows: unset;
}

.col-weapons div.header {
    position: relative;
}
.col-weapons div:nth-child(n+4):nth-child(-n+6),
.col-weapons div:nth-child(n+8):nth-child(-n+21) {
    font-size: 7px;
    line-height: unset;
    display: grid;
    align-items: center;
}
.col-weapons div:nth-child(n+8):nth-child(-n+18):before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    margin: auto;
    border: solid 1px white;
    border-radius: 50%;
}
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(n+11):nth-child(-n+22) * {
    font-size: 10px;
    line-height: unset;
}
body .charsheet .grid.lined .repeating_weapons ~ .repcontainer .repitem div:nth-child(9),
body .charsheet .grid.lined .repeating_weapons ~ .repcontainer .repitem div:nth-child(24),
body .charsheet .boxstat.total {
    background: black;
    padding: 0 2px;
}
body .charsheet .boxstat.total {
    padding: 2px;
}
body .charsheet .boxstat.total + .total  {
    padding: 2px 2px 2px 0;
}
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(9) span,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(24) span,
body .charsheet .boxstat.total input:not(button),
body .charsheet .boxstat.total .input:not(button) {
    display: block;
    background: white;
    height: 100%;
    clip-path: polygon(
        0% 20%,
        15% 0%,
        85% 0%,
        100% 20%,
        100% 80%,
        85% 100%,
        15% 100%,
        0% 80%
    );
}
body .charsheet .boxstat.total .input {
    height: 35px;
}
body .charsheet .repeating_weapons ~ .repcontainer .repitem:last-child div:nth-child(9),
body .charsheet .repeating_weapons ~ .repcontainer .repitem:last-child div:nth-child(24) {
    padding-bottom: 2px;
}
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(22) {
    z-index: 0;
}
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(22):before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    margin: auto;
    border: solid 1px black;
    border-radius: 50%;
    z-index: -1;
}
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(22) input {
    z-index: 1;
}
body .charsheet .repeating_weapons ~ .repcontainer .repitem input[type=number],
body .charsheet .repeating_weapons ~ .repcontainer .repitem .input {
    text-align: center;
}

.repeating_accessories ~ .repcontainer .repitem {
    grid-template-columns: 1fr 5fr;
}
body .charsheet .col2-locations div,
body .charsheet .grid .col2-locations input,
body .charsheet .grid .col4-armor input[type=number],
.repeating_accessories ~ .repcontainer .repitem div,
.repeating_accessories ~ .repcontainer .repitem input,
.repeating_armor ~ .repcontainer .repitem input[type=number] {
    text-align: center;
}
body .charsheet .col2-locations *:nth-child(13),
body .charsheet .col2-locations *:nth-child(15) {
    font-size: 7px;
}

body .charsheet .col2-evasion div:nth-child(2) div:nth-child(2) {
    margin-right: 0;
}

body .charsheet div .grid .magic-circle {
    display: none;
}
body .charsheet div .grid .magic-power:not([value='']) + .magic-circle {
    display: grid;
}
.magic-circle span {
    text-align: center;
}
.magic-circle > span:first-child {
    position: relative;
    display: grid;
    aspect-ratio : 1 / 1;
    width: 100%;
    height: unset;
    border: solid 1px black;
    border-radius: 50%;
    align-items: center;
}
.magic-circle span:first-child span {
    border: none;
}
body .charsheet .magic-circle > span:nth-child(2) {
    font-size: 7px;
}
body .charsheet .magic-circle > span:nth-child(3) {
    border: none;
    font-size: 13px;
    white-space: nowrap;
    padding: 0;
}
body .charsheet div .grid .magic-circle .input.lrg {
    min-height: unset;
}

body .charsheet .lined.black {
    border: solid 2px black;
}
body .charsheet .powertable div,
.repeating_powertable ~ .repcontainer .repitem div,
.repeating_powertable ~ .repcontainer .repitem input[type=number] {
    font-size: 10px;
    line-height: unset;
    display: grid;
    align-items: center;
    text-align: center;
}
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+1),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+2),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+3),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+4),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+5),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+6),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+7),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+8),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+9),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+10),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+11),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+12),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+13),
body .charsheet .grid.lined .repeating_powertable ~ .repcontainer .repitem:nth-child(odd) > div {
    background: gainsboro;
}
body .charsheet .grid.lined .grid.powertable > div:first-child {
    background:
        linear-gradient(to top right,
            gainsboro 0%,
            gainsboro calc(50% - 0.8px),
            black 50%,
            gainsboro calc(50% + 0.8px),
            gainsboro 100%);
}
body .charsheet .grid.lined .grid.powertable > div:nth-child(13) {
    background:
        linear-gradient(to top left,
            gainsboro 0%,
            gainsboro calc(50% - 0.8px),
            black 50%,
            gainsboro calc(50% + 0.8px),
            gainsboro 100%);
}
body .charsheet .grid.lined .repeating_powertable ~ .repcontainer .repitem > div button,
body .charsheet .grid.lined .repeating_powertable ~ .repcontainer .repitem > div button:hover,
body .charsheet .grid.lined .grid.powertable > div button,
body .charsheet .grid.lined .grid.powertable > div button:hover {
    background: none;
    display: grid;
    margin: 0;
    padding: 0;
    place-content: center;
    cursor: pointer;
}
body .charsheet .grid.lined .repeating_powertable ~ .repcontainer .repitem > div button:before,
body .charsheet .grid.lined .grid.powertable > div button:before {
    content: 'F';
    font-family: 'dicefontd6';
    font-size: 10px;
}
body .charsheet .grid.lined .repeating_powertable ~ .repcontainer .repitem > div button:hover:before,
body .charsheet .grid.lined .grid.powertable > div button:hover:before {
    color: gold;
}
body .charsheet .powertable div:nth-child(n+2):nth-child(-n+12) {
    font-size: 7px;
}
body .charsheet .powertable div:nth-child(n+2):nth-child(-n+12):before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    margin: auto;
    border: solid 1px black;
    border-radius: 50%;
}

.repeating_consumables ~ .repcontainer {
    margin-top: -10px;
    gap: 5px;
}
.repeating_consumables ~ .repcontainer .repitem {
    place-content: center;
    align-items: center;
}

body .charsheet .toggle-cards + div {
    display: none;
}
body .charsheet .toggle-cards:not([value='0']) + div {
    display: grid;
}
.charsheet .cards .header {
    background: dimgray;
}
body .charsheet .profile .cards input[type=number] {
    text-align: center;
}

/* monster */
body .charsheet .monster span.input {
    border: none;
}
.charsheet .monster > div:not(.lined) {
    border: solid 1px black;
}
.monster .repitem {
    height: unset;
}
body .charsheet .monster input[type=text],
body .charsheet .monster div input[type=number],
.monster .auto-expand textarea {
    border-bottom: solid 1px gainsboro;
}
body .charsheet div .col3-title input,
body .charsheet div .col3-title input[type=number] {
    border: none;
}
.charsheet .col3-title input:not(:first-child) {
    background: black;
    color: white;
}
.charsheet .col3-title input.label {
    height: 30px;
    text-align: right;
}
.charsheet .monster > div:nth-child(2),
.charsheet .monster > div:nth-child(4),
.charsheet .monster > div:nth-child(7) {
    padding: 5px 10px;
}
.charsheet .monster .header {
    background: gray;
}
body .charsheet .monster > .grid.lined:nth-child(3) .repcontainer .repitem:nth-child(odd) > div {
    background: gainsboro;
}
.charsheet .monster .lined input[type=text],
.charsheet .monster .lined input[type=number],
.charsheet .monster .lined .input {
    text-align: center;
}
body .charsheet .monster .grid.lined .grid.col3.damage {
    position: relative;
}
body .charsheet .monster .grid.lined .grid.col3.damage:before {
    content: '+';
    position: absolute;
    bottom: 2px;
    left: calc(33% - 3.5px);
}
body .charsheet .monster .repeating_monsterskills ~ .repcontainer .repitem .grid.col4 .input:nth-child(5):before,
body .charsheet .monster .grid .grid.col4 .input:nth-child(4):before {
    content: '(';
}
body .charsheet .monster .repeating_monsterskills ~ .repcontainer .repitem .grid.col4 .input:nth-child(5):after,
body .charsheet .monster .grid .grid.col4 .input:nth-child(4):after {
    content: ')';
}
body .charsheet .monster .grid.lined .maxvs {
    position: relative;
}
body .charsheet .monster .grid.lined .maxvs:before,
body .charsheet .monster .grid.lined .maxvs:after {
    position: absolute;
    bottom: 2px;
    font-size: 7px;
    height: 14px;
}
body .charsheet .monster .grid.lined .maxvs:before {
    content: 'MAX';
    left: calc(25% - 9px);
}
body .charsheet .monster .grid.lined .maxvs:after {
    content: 'CURRENT';
    right: calc(25% - 19px);
}
body .charsheet .monster .grid .grid.divide,
body .charsheet .monster .grid.lined .repcontainer .repitem > .grid.divide {
    background:
        linear-gradient(105deg,
            white 0%,
            white calc(50% - 0.8px),
            darkgray 50%,
            white calc(50% + 0.8px),
            white 100%);
}
body .charsheet .monster > .grid.lined:nth-child(3) .repcontainer .repitem:nth-child(odd) > .grid.divide {
    background:
        linear-gradient(105deg,
            gainsboro 0%,
            gainsboro calc(50% - 0.8px),
            darkgray 50%,
            gainsboro calc(50% + 0.8px),
            gainsboro 100%);
}
body .charsheet .monster .grid.nogap:nth-child(5) {
    border: none;
}
body .charsheet .monster .grid.nogap:nth-child(5) > div:first-child {
    border: solid 1px black;
}
body .charsheet .monster .grid.nogap:nth-child(5) > div:nth-child(3) {
    border: solid 1px black;
    border-top: none;
}
body .charsheet .monster .repeating_monsterskills ~ .repcontainer .repitem {
    padding: 5px 10px;
}
body .charsheet .monster .repeating_monsterskills ~ .repcontainer .repitem input[type=number],
body .charsheet .monster .repeating_monsterskills ~ .repcontainer .repitem .input {
    text-align: center;
}

/* begin dropdown */
body .charsheet div .grid .dropdown input,
body .charsheet div .grid .dropdown-content {
    display: none;
}
label.dropdown {
    position: relative;
    display: block;
    cursor: pointer;
    width: fit-content;
}
.dropbtn {
    cursor: pointer;
    transition: 0.35s ease-out;
    text-align: center;
}
.dropdown .dropdown-content {
    position: absolute;
    top: 50%;
    background-color: #f7f7f7;
    min-width: 50vw;
    padding: 5px 10px;
    border: solid 1px darkgray;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 99;
    transition: 0.35s ease-out;
}
body .charsheet div .grid .dropdown > input:checked ~ .dropdown-content {
  display: grid;
  transform: translateY(5px);
}
.dropbtn:hover,
.dropdown > input:checked ~ .dropbtn {
    color: gold;
}
/* end dropdown */

.monster .repeating_monsterskills ~ .repcontainer .repitem .grid.col4.nogap {
    width: 33%;
}
.type-declared,
.type-preparation,
.toggle-template[value=""] ~ div .grid.col4.nogap,
.toggle-template[value="magic"] ~ div .grid.col4.nogap button.target,
.toggle-template[value="resistance"] ~ div .grid.col4.nogap button.check,
.toggle-action[value="section"] ~ div .grid.col4.nogap,
.toggle-action[value="section"] ~ div.auto-expand {
    display: none;
}
.toggle-action[value="section"] ~ div input {
    font-weight: bold;
}
.toggle-declared[value="1"] ~ div .type-declared,
.toggle-preparation[value="1"] ~ div .type-preparation {
    display: block;
}
.action-type:before {
    content: '◯';
}
.toggle-action[value="major"] ~ div .action-type:before {
    content: '▶';
}
.toggle-action[value="minor"] ~ div .action-type:before {
    content: '7';
    font-family: 'Pictos';
}
.toggle-action[value="section"] ~ div .action-type:before {
    content: '●';
    font-size: 26px;
    line-height: 16px;
}
.type-declared:before {
    content: 'y';
    font-family: 'Pictos Custom';
    text-transform: initial;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
}
.type-preparation:before {
    content: '△';
}
body .charsheet .grid.lined .repeating_monsterloot ~ .repcontainer .repitem div:nth-child(2) {
    background: gainsboro;
}
.repeating_monsterloot ~ .repcontainer .repitem div:nth-child(3) input[type=text] {
    text-align: left;
}
.repeating_monsterloot ~ .repcontainer .repitem div:nth-child(4) {
    text-align: center;
}
.repeating_monsterloot ~ .repcontainer .repitem div:nth-child(4) button:before {
    content: 'g';
    font-family: 'Pictos Three';
}

/* fellow */

.charactersheet .toggle-fautocalc[value='0'] ~ .fellow .acalc,
.charactersheet .toggle-fautocalc[value='1'] ~ .fellow .mcalc {
    display: none
}

body .charsheet .hex {
    display: block;
    position: relative;
    background: black;
    height: 100%;
    clip-path: polygon(
        0% 50%,
        30% 0%,
        70% 0%,
        100% 50%,
        70% 100%,
        30% 100%
    );
    aspect-ratio : 1.2 / 1;
}
body .charsheet .hex:before {
    position: absolute;
    content: '';
    background: white;
    width: 100%;
    height: 100%;
    clip-path: polygon(
        3% 50%,
        31% 3%,
        69% 3%,
        97% 50%,
        69% 97%,
        31% 97%
    );
    z-index: -1;
}
body .charsheet .hex *,
body .charsheet div .grid.hex input[type=number],
body .charsheet div .grid.hex .input {
    text-align: center;
    border: none;
}
body .charsheet div .grid.hex input[type=number],
body .charsheet div .grid.hex .input {
    font-size: 24px;
    min-height: 80px;
}
body .charsheet div .grid.hex .input {
    display: grid;
    place-content: center;
}
.fellow .grid.fellowxp > * {
    width: fit-content;
    justify-self: end;
}
.fellow label.flex {
    place-items: center;
}
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+18),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+19),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+20),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+21),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+22),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+22) > input,
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+23),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+24),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+25),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+26),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+27),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+27) > input,
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+28) {
    background: gainsboro;
}
.charactersheet .toggle-expanded[value='0'] ~ .fellow .grid.lined .grid > div.vspan2 {
    grid-row: span 1;
}
.charactersheet .toggle-expanded[value='0'] ~ .fellow .grid.lined .grid > div:nth-child(11n+13),
.charactersheet .toggle-expanded[value='0'] ~ .fellow .grid.lined .grid > div:nth-child(11n+14),
.charactersheet .toggle-expanded[value='0'] ~ .fellow .grid.lined .grid > div:nth-child(11n+15),
.charactersheet .toggle-expanded[value='0'] ~ .fellow .grid.lined .grid > div:nth-child(11n+16),
.charactersheet .toggle-expanded[value='0'] ~ .fellow .grid.lined .grid > div:nth-child(11n+17) {
    display: none;
}
body .charsheet .fellow .grid.lined .grid > div {
    display: grid;
    place-items: center;
    height: auto;
}
body .charsheet .fellow .grid.lined .grid > div:nth-child(11n+7) {
    font-family: 'dicefontd6';
}
body .charsheet .fellow .grid.lined .grid > div > * {
    text-align: center;
}
.fellow .col6-fellowactions > *:first-child > *:first-child {
    place-self: end;
}
.fellow .col6-fellowactions > *:first-child > *:last-child {
    place-self: start;
}
.fellow .col6-fellowactions .vspan2 button[type=action] {
    display: none;
}

/* editable boxes */

.editable {
    position: relative;
}
.charsheet .grid .editable .editmode:not([value='1']) ~ .editbox {
    display: none;
}
.editable input[type=checkbox]:nth-child(2) {
    z-index: 1001;
    position: absolute;
    width: 16px;
    height: 100%;
    left: 2px;
    top: 0;
}
.charsheet .grid .editable .editmode:not([value='1']) + input[type=checkbox] {
    display: none;
}
.charsheet .grid .editable:hover .editmode:not([value='1']) + input[type=checkbox] {
    display: grid;
    color: darkgray;
}
.charsheet .grid .editable input[type=checkbox]:nth-child(2):before {
    content: 'y';
    font-family: 'Pictos';
}
.charsheet .grid .editable input[type=checkbox]:nth-child(2):hover {
    cursor: pointer;
    color: gold;
}
.editbox {
    z-index: 1000;
    position: absolute;
    display: grid;
    background: whitesmoke;
    opacity: .95;
    top: 0;
    bottom: 0;
    padding: 5px 10px 5px 30px;
    place-content: center;
}
.charsheet .grid .editable .editbox:before {
    content: '+';
    position: absolute;
    display: grid;
    top: 0;
    left: 20px;
    height: 100%;
    place-items: center;
}
.charsheet .grid .editable .editbox * {
    height: 20px;
    line-height: 20px;
}
.charsheet .grid .editable .editbox input[type=number] {
    border-bottom: solid 1px black;
    text-align: center;
}
.toggle-modifier[value='0'] + span {
    display: none;
}
.toggle-modifier + span:before {
    content: '+ ';
}
.magic-circle .toggle-modifier + span {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
}

/* Roll templates */

.sheet-rolltemplate-swskill,
.sheet-rolltemplate-swdamage,
.sheet-rolltemplate-swinfo {
    box-sizing: border-box;
    background: #e7e4d2;
    width: 100%;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 0 2px 4px 0 #0002, 0 3px 10px 0 #0001;
}
.sheet-rolltemplate-swskill .sheet-container .inlinerollresult,
.sheet-rolltemplate-swdamage .sheet-container .inlinerollresult {
    background: none;
    border: 0;
    padding: 0;
}
.sheet-rolltemplate-swskill .sheet-container,
.sheet-rolltemplate-swdamage .sheet-container,
.sheet-rolltemplate-swinfo .sheet-container {
    border: 20px solid transparent;
    border-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/sword-world-dev/Sword%20World/images/border2.png') 65 stretch;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.sheet-rolltemplate-swskill .sheet-container *,
.sheet-rolltemplate-swdamage .sheet-container *,
.sheet-rolltemplate-swinfo .sheet-container * {
    font-family: 'Noto Sans', serif;
    text-align: center;
    color: #765a37;
}
.sheet-rolltemplate-swskill .sheet-container > a > img,
.sheet-rolltemplate-swdamage .sheet-container > a > img,
.sheet-rolltemplate-swinfo .sheet-container > a > img {
    width: 70px;
}
.sheet-rolltemplate-swskill .sheet-container h1,
.sheet-rolltemplate-swdamage .sheet-container h1,
.sheet-rolltemplate-swinfo .sheet-container h1,
.sheet-rolltemplate-swskill .sheet-container h1 *,
.sheet-rolltemplate-swdamage .sheet-container h1 *,
.sheet-rolltemplate-swinfo .sheet-container h1 * {
    font-family: 'Jim Nightshade', 'Kaushan Script', serif;
    font-size: 20px;
    line-height: 25px;
    margin: 0;
    padding: 0;
}
.sheet-rolltemplate-swskill .sheet-container p,
.sheet-rolltemplate-swdamage .sheet-container p,
.sheet-rolltemplate-swinfo .sheet-container p {
    margin: 0;
    padding: 0;
}
.sheet-rolltemplate-swskill .sheet-crit,
.sheet-rolltemplate-swskill .sheet-fumble,
.sheet-rolltemplate-swdamage .sheet-fumble {
    display: none;
    place-content: center;
    height: 48px;
}
.sheet-rolltemplate-swskill .sheet-die1,
.sheet-rolltemplate-swskill .sheet-die2,
.sheet-rolltemplate-swskill .sheet-die3,
.sheet-rolltemplate-swskill .sheet-die4,
.sheet-rolltemplate-swskill .sheet-die5,
.sheet-rolltemplate-swskill .sheet-die6 {
    display: grid;
    place-content: center;
    height: 48px;
    color: green;
}
.sheet-rolltemplate-swdamage .sheet-crit {
    display: none;
}
.sheet-rolltemplate-swskill .sheet-template-crit ~ .sheet-container .sheet-crit,
.sheet-rolltemplate-swskill .sheet-template-fumble ~ .sheet-container .sheet-fumble,
.sheet-rolltemplate-swdamage .sheet-template-crit ~ .sheet-container .sheet-crit,
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable .sheet-crit,
.sheet-rolltemplate-swdamage .sheet-template-fumble ~ .sheet-container .sheet-fumble {
    display: grid;
}
.sheet-rolltemplate-swskill .sheet-crit:before,
.sheet-rolltemplate-swskill .sheet-fumble:before,
.sheet-rolltemplate-swdamage .sheet-fumble:before,
.sheet-rolltemplate-swskill .sheet-die1:before,
.sheet-rolltemplate-swskill .sheet-die2:before,
.sheet-rolltemplate-swskill .sheet-die3:before,
.sheet-rolltemplate-swskill .sheet-die4:before,
.sheet-rolltemplate-swskill .sheet-die5:before,
.sheet-rolltemplate-swskill .sheet-die6:before {
    font-family: 'dicefontd6';
    font-size: 48px;
}
.sheet-rolltemplate-swskill .sheet-crit:before {
    content: 'll';
}
.sheet-rolltemplate-swskill .sheet-die1:before {
    content: 'g';
}
.sheet-rolltemplate-swskill .sheet-die2:before {
    content: 'h';
}
.sheet-rolltemplate-swskill .sheet-die3:before {
    content: 'i';
}
.sheet-rolltemplate-swskill .sheet-die4:before {
    content: 'j';
}
.sheet-rolltemplate-swskill .sheet-die5:before {
    content: 'k';
}
.sheet-rolltemplate-swskill .sheet-die6:before {
    content: 'l';
}
.sheet-rolltemplate-swskill .sheet-success,
.sheet-rolltemplate-swskill .sheet-crit:before,
.sheet-rolltemplate-swdamage .sheet-success,
.sheet-rolltemplate-swdamage .sheet-crit {
    color: green;
}
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable .sheet-crit:nth-child(n+2):nth-child(-n+12):before {
    border-color: green;
}
.sheet-rolltemplate-swskill .sheet-fumble:before,
.sheet-rolltemplate-swdamage .sheet-fumble:before {
    content: 'gg';
}
.sheet-rolltemplate-swskill .sheet-fail,
.sheet-rolltemplate-swskill .sheet-fumble:before,
.sheet-rolltemplate-swdamage .sheet-fail,
.sheet-rolltemplate-swdamage .sheet-fumble:before {
    color: red;
}
.sheet-rolltemplate-swskill .sheet-success + .sheet-success,
.sheet-rolltemplate-swskill .sheet-fail + .sheet-fail,
.sheet-rolltemplate-swdamage .sheet-success + .sheet-success,
.sheet-rolltemplate-swdamage .sheet-fail + .sheet-fail {
    font-size: 10px;
    margin: -10px 0 0 0;
}
.sheet-rolltemplate-swskill .sheet-container a[href^="~"],
.sheet-rolltemplate-swdamage .sheet-container a[href^="~"],
.sheet-rolltemplate-swinfo .sheet-container a[href^="~"] {
    background: #e7e4d2;
    color: #c9b48c;
    border: solid 1px #c9b48c;
}
.sheet-rolltemplate-swskill .sheet-container a[href^="~"]:hover,
.sheet-rolltemplate-swdamage .sheet-container a[href^="~"]:hover,
.sheet-rolltemplate-swinfo .sheet-container a[href^="~"]:hover {
    background: #e7e4d2;
    color: #765a37;
    border: solid 1px #765a37;
}
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
}
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable * {
    font-size: 10px;
    outline: solid 1px #765a37;
    background: #e7e4d2;
}
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable *:first-child {
    background: #765a37;
    color: #e7e4d2;
}
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable *:first-child:before {
    content: 'F';
    font-family: 'dicefontd6';
}
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable *:nth-child(n+2):nth-child(-n+12) {
    background: #c9b48c;
    position: relative;
}
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable *:nth-child(n+2):nth-child(-n+12):before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 1px;
    width: 12px;
    height: 12px;
    margin: auto;
    border: solid 1px #765a37;
    border-radius: 50%;
}
.sheet-rolltemplate-swdamage .sheet-template-fumble ~ .sheet-container .sheet-powertable *:nth-child(2),
.sheet-rolltemplate-swdamage .sheet-template-fumble ~ .sheet-container .sheet-powertable *:nth-child(14) {
    background: red;
    color: white;
}
.sheet-rolltemplate-swdamage .sheet-template-3 ~ .sheet-container .sheet-powertable *:nth-child(3),
.sheet-rolltemplate-swdamage .sheet-template-4 ~ .sheet-container .sheet-powertable *:nth-child(4),
.sheet-rolltemplate-swdamage .sheet-template-5 ~ .sheet-container .sheet-powertable *:nth-child(5),
.sheet-rolltemplate-swdamage .sheet-template-6 ~ .sheet-container .sheet-powertable *:nth-child(6),
.sheet-rolltemplate-swdamage .sheet-template-7 ~ .sheet-container .sheet-powertable *:nth-child(7),
.sheet-rolltemplate-swdamage .sheet-template-8 ~ .sheet-container .sheet-powertable *:nth-child(8),
.sheet-rolltemplate-swdamage .sheet-template-9 ~ .sheet-container .sheet-powertable *:nth-child(9),
.sheet-rolltemplate-swdamage .sheet-template-10 ~ .sheet-container .sheet-powertable *:nth-child(10),
.sheet-rolltemplate-swdamage .sheet-template-11 ~ .sheet-container .sheet-powertable *:nth-child(11),
.sheet-rolltemplate-swdamage .sheet-template-12 ~ .sheet-container .sheet-powertable *:nth-child(12),
.sheet-rolltemplate-swdamage .sheet-template-3 ~ .sheet-container .sheet-powertable *:nth-child(15),
.sheet-rolltemplate-swdamage .sheet-template-4 ~ .sheet-container .sheet-powertable *:nth-child(16),
.sheet-rolltemplate-swdamage .sheet-template-5 ~ .sheet-container .sheet-powertable *:nth-child(17),
.sheet-rolltemplate-swdamage .sheet-template-6 ~ .sheet-container .sheet-powertable *:nth-child(18),
.sheet-rolltemplate-swdamage .sheet-template-7 ~ .sheet-container .sheet-powertable *:nth-child(19),
.sheet-rolltemplate-swdamage .sheet-template-8 ~ .sheet-container .sheet-powertable *:nth-child(20),
.sheet-rolltemplate-swdamage .sheet-template-9 ~ .sheet-container .sheet-powertable *:nth-child(21),
.sheet-rolltemplate-swdamage .sheet-template-10 ~ .sheet-container .sheet-powertable *:nth-child(22),
.sheet-rolltemplate-swdamage .sheet-template-11 ~ .sheet-container .sheet-powertable *:nth-child(23),
.sheet-rolltemplate-swdamage .sheet-template-12 ~ .sheet-container .sheet-powertable *:nth-child(24) {
    background: green;
    color: white;
}
.sheet-rolltemplate-swdamage .sheet-template-fumble ~ .sheet-container .sheet-powertable *:nth-child(2):before,
.sheet-rolltemplate-swdamage .sheet-template-3 ~ .sheet-container .sheet-powertable *:nth-child(3):before,
.sheet-rolltemplate-swdamage .sheet-template-4 ~ .sheet-container .sheet-powertable *:nth-child(4):before,
.sheet-rolltemplate-swdamage .sheet-template-5 ~ .sheet-container .sheet-powertable *:nth-child(5):before,
.sheet-rolltemplate-swdamage .sheet-template-6 ~ .sheet-container .sheet-powertable *:nth-child(6):before,
.sheet-rolltemplate-swdamage .sheet-template-7 ~ .sheet-container .sheet-powertable *:nth-child(7):before,
.sheet-rolltemplate-swdamage .sheet-template-8 ~ .sheet-container .sheet-powertable *:nth-child(8):before,
.sheet-rolltemplate-swdamage .sheet-template-9 ~ .sheet-container .sheet-powertable *:nth-child(9):before,
.sheet-rolltemplate-swdamage .sheet-template-10 ~ .sheet-container .sheet-powertable *:nth-child(10):before,
.sheet-rolltemplate-swdamage .sheet-template-11 ~ .sheet-container .sheet-powertable *:nth-child(11):before,
.sheet-rolltemplate-swdamage .sheet-template-12 ~ .sheet-container .sheet-powertable *:nth-child(12):before {
    border-color: white;
}
.sheet-rolltemplate-swskill .sheet-container .sheet-refmark,
.sheet-rolltemplate-swdamage .sheet-container .sheet-refmark,
.sheet-rolltemplate-swinfo .sheet-container .sheet-refmark {
    font-size: 10px;
    line-height: unset;
}
.sheet-rolltemplate-swskill .sheet-container .sheet-refmark:before,
.sheet-rolltemplate-swdamage .sheet-container .sheet-refmark:before,
.sheet-rolltemplate-swinfo .sheet-container .sheet-refmark:before {
    content: '※';
    font-family: cursive;
}