@font-face {
    font-family: 'Noto Serif', 'serif';
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: local('Noto Serif'), local('NotoSerif'), url(https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap);
}

* {
    --border-image-url: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Malmsturm/assets/boxen-und-striche_charakterbogen_01.png") 30 fill stretch;
    --border-image-width: 10px;
    font-family: 'Noto Serif', 'serif';
}

.repcontainer[data-groupname="repeating_aspect"]>.repitem:hover>.itemcontrol:hover {
    margin-top: -6px;
}

.sheet-char_selector[value="character"]~* {
    --display-character: inline;
    --display-contact: none;
}

.sheet-char_selector[value="contact"]~* {
    --display-character: none;
    --display-contact: inline;
}

.sheet-character {
    display: var(--display-character);
}

.sheet-contact {
    display: var(--display-contact);
}

.sheet-sheet_selector[value="main"]~* {
    --main-grid-template-areas: "title  title " "tabs tabs" "aspects aspects" "skills points" "skills stress" "skills consequence" "skills rewards" "stunts extras";
    --display-skills: inline-block;
    --display-aspects: inline-block;
    --display-points: grid;
    --display-stress: grid;
    --display-stunts: inline-block;
    --display-extras: inline-block;
    --display-consequence: inline-block;
    --display-rewards: inline-block;
    --display-follower: none;
    --display-notes: none;
    --display-tradition: none;
    --display-4-actions: none;
    --display-trauma: none;
}

.sheet-sheet_selector[value="follower"]~* {
    --main-grid-template-areas: "title  title " "tabs tabs" "follower follower";
    --display-skills: none;
    --display-aspects: none;
    --display-points: none;
    --display-stress: none;
    --display-stunts: none;
    --display-extras: none;
    --display-consequence: none;
    --display-rewards: none;
    --display-follower: inline-block;
    --display-notes: none;
    --display-tradition: none;
    --display-4-actions: none;
    --display-trauma: none;
}

.sheet-sheet_selector[value="tradition"]~* {
    --main-grid-template-areas: "title  title" "tabs tabs" "tradition tradition" "trauma trauma" "4-actions 4-actions" "notes notes";
    --display-skills: none;
    --display-aspects: none;
    --display-points: none;
    --display-stress: none;
    --display-stunts: none;
    --display-extras: none;
    --display-consequence: none;
    --display-rewards: none;
    --display-follower: none;
    --display-notes: inline-block;
    --display-tradition: inline-block;
    --display-4-actions: grid;
    --display-trauma: inline-block;
}

.sheet-golden {
    color: #8a6d45;
}

.sheet-bloody {
    color: #c20e1a;
}

.sheet-font-text {
    font-weight: bold;
}

.sheet-left_margin {
    margin-left: 1em;
}

.sheet-main {
    display: grid;
    width: 870px;
    grid-gap: 0px;
    grid-template-columns: auto;
    grid-template-rows: auto;
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Malmsturm/assets/bg_splats_png24.png);
    background-repeat: repeat;
    grid-template-areas: var(--main-grid-template-areas);
}

input {
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid;
    border-left: 0;
    border-radius: 3px;
}

select {
    -webkit-appearance: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    text-align: center;
}

h3 {
    margin-bottom: 5px;
}

.sheet-title {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr 2fr 2fr 1fr;
    border-radius: 3px;
    border: 1px solid;
    margin: 10px;
    padding: 5px;
    grid-area: title;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
}

.sheet-title-image {
    grid-column: 3 /5;
    grid-row: 2 / 5;
    max-width: 75%;
    margin-left: 5.5em;
}

.sheet-title-text {
    width: 12em;
    white-space: nowrap;
    grid-column: 1 /1;
}

.sheet-title-input {
    width: 25em;
    grid-column: 2 /2;
}

.sheet-title-setting1 {
    grid-column: 1 / 3;
    grid-row: 1 / 1;
    margin-bottom: 5px;
}

.sheet-tabs {
    display: grid;
    grid-gap: 5px;
    border-radius: 3px;
    border: 1px solid;
    margin: 10px;
    padding: 5px;
    grid-area: tabs;
    grid-template-columns: 1fr 1fr 1fr;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
}

.sheet-aspects {
    display: var(--display-aspects);
    grid-gap: 5px;
    border-radius: 3px;
    border: 1px solid;
    margin: 10px;
    padding: 5px;
    grid-area: aspects;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
}

.sheet-aspects-select {
    width: max-content;
}

.sheet-aspects-text {
    width: 40em;
}

.sheet-skills {
    display: var(--display-skills);
    border-radius: 3px;
    border: 1px solid;
    margin: 10px;
    padding: 5px;
    grid-area: skills;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
}

.sheet-skill {
    display: grid;
    grid-template-columns: 12em auto;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
}

.sheet-skill-input {
    width: 10em;
}

.sheet-skill-text {
    width: 10em;
    line-height: 3em;
}

.sheet-modifikator {
    width: max-content;
}

.sheet-points {
    display: var(--display-points);
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr;
    border-radius: 3px;
    border: 1px solid;
    margin: 10px;
    padding: 5px;
    grid-area: points;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
}

.sheet-points-text {
    width: max-content;
}

.sheet-stress {
    display: var(--display-stress);
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr 2fr 1fr;
    border-radius: 3px;
    border: 1px solid;
    margin: 10px;
    padding: 5px;
    grid-area: stress;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
}

.sheet-stress-select {
    width: 8em;
}

.sheet-stress-header {
    text-align: center;
    margin-top: 5px;
    margin-left: -20px;
}

input[type="checkbox"].sheet-klapp-cb {
    z-index: 1;
    position: relative;
    top: 5px;
    left: 6px;
    width: 16px;
    height: 16px;
    margin: -10px;
    opacity: 0;
    cursor: pointer;
}

input[type="checkbox"].sheet-klapp-cb+span::before {
    content: "(-)";
    font-weight: bold;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    line-height: 14px;
}

input[type="checkbox"].sheet-klapp-cb:checked+span::before {
    content: "(+)";
    font-weight: bold;
}

div.sheet-klapp-box {
    display: block;
}

input[type="checkbox"].sheet-klapp-cb:checked~div.sheet-klapp-box {
    display: none;
}

.sheet-consequence {
    display: var(--display-consequence);
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border-radius: 3px;
    border: 1px solid;
    margin: 10px;
    padding: 5px;
    grid-area: consequence;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
    min-width: 30;
}

.sheet-consequence-text {
    width: 18em;
}

.sheet-stunts {
    display: var(--display-stunts);
    grid-gap: 5px;
    grid-template-columns: 1fr auto;
    border-radius: 3px;
    border: 1px solid;
    margin: 10px;
    padding: 5px;
    grid-area: stunts;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
}

.sheet-stunt-textarea {
    width: 97%
}

.sheet-stunt-select {
    width: 10em;
}

.sheet-stunt-div {
    display: grid;
    grid-template-columns: 10em 1fr;
}

.sheet-extras {
    display: var(--display-extras);
    grid-gap: 5px;
    grid-template-columns: 1fr 3fr;
    border-radius: 3px;
    border: 1px solid;
    margin: 10px;
    padding: 5px;
    grid-area: extras;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
}

.sheet-rewards {
    display: var(--display-rewards);
    grid-gap: 5px;
    grid-template-columns: 1fr 3fr;
    border-radius: 3px;
    border: 1px solid;
    margin: 10px;
    padding: 5px;
    grid-area: rewards;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
}

.sheet-reward-text {
    width: 24em;
}

.sheet-follower {
    display: var(--display-follower);
    grid-gap: 5px;
    grid-template-columns: 1fr 3fr;
    border-radius: 3px;
    border: 1px solid;
    margin: 10px;
    padding: 5px;
    grid-area: follower;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
}

.sheet-notes {
    display: var(--display-notes);
    grid-gap: 5px;
    grid-template-columns: 1fr 3fr;
    border-radius: 3px;
    border: 1px solid;
    margin: 10px;
    padding: 5px;
    grid-area: notes;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
}

.sheet-tradition {
    display: var(--display-tradition);
    grid-gap: 5px;
    grid-template-columns: 1fr 3fr;
    border-radius: 3px;
    border: 1px solid;
    margin: 10px;
    padding: 5px;
    grid-area: tradition;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
}

.sheet-4-actions {
    display: var(--display-4-actions);
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "4-actions-title 4-actions-title" "overcome create" "overcome-text create-text" "attack defend" "attack-text defend-text";
    border-radius: 3px;
    border: 1px solid;
    margin: 10px;
    padding: 5px;
    grid-area: 4-actions;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
}

.sheet-4-actions-title {
    grid-area: 4-actions-title;
}

.sheet-attack {
    grid-area: attack;
    margin: 10px;
    padding: 5px;
}

.sheet-attack-text {
    grid-area: attack-text;
    margin: 10px;
    padding: 5px;
    width: 28em;
}

.sheet-create {
    grid-area: create;
    margin: 10px;
    padding: 5px;
}

.sheet-create-text {
    margin: 10px;
    padding: 5px;
    grid-area: create-text;
    width: 28em;
}

.sheet-defend {
    grid-area: defend;
    margin: 10px;
    padding: 5px;
}

.sheet-defend-text {
    grid-area: defend-text;
    margin: 10px;
    padding: 5px;
    width: 28em;
}

.sheet-overcome {
    grid-area: overcome;
    margin: 10px;
    padding: 5px;
}

.sheet-overcome-text {
    grid-area: overcome-text;
    margin: 10px;
    padding: 5px;
    width: 28em;
}

.sheet-trauma {
    display: var(--display-trauma);
    grid-gap: 5px;
    grid-template-columns: 1fr 3fr;
    border-radius: 3px;
    border: 1px solid;
    margin: 10px;
    padding: 5px;
    grid-area: trauma;
    border-image: var(--border-image-url);
    border-width: var(--border-image-width);
}

.sheet-trauma-textarea {
    width: 97%;
    height: 150px;
}

button[type="roll"].sheet-w6chat:before {
    content: ' ';
}

button[type="roll"].sheet-w6chat:hover {
    background-position: 0;
}

button[type="roll"].sheet-w6chat {
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Malmsturm/assets/chat-icon_512x512-gold_B.png);
    background-size: 16px 16px;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    border-style: none;
    background-color: transparent;
    margin-left: 5px;
}

button[type="roll"].sheet-w6fate:before {
    content: ' ';
}

button[type="roll"].sheet-w6fate:hover {
    background-position: 0;
}

button[type="roll"].sheet-w6fate {
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Malmsturm/assets/dice-icon_512x512_gold.png);
    background-size: 26px 26px;
    background-repeat: no-repeat;
    width: 26px;
    height: 26px;
    border-style: none;
    background-color: transparent;
    margin-left: 5px;
}




.sheet-rolltemplate-fate table,
.sheet-rolltemplate-chat table {
    font-family: 'Noto Serif', 'serif';
    width: auto;
    min-width: 180px;
    background-color: #ffffff;
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Malmsturm/assets/boxen-und-striche_charakterbogen_01.png") ;
    background-position: top left;
    background-size: cover;
}

.sheet-rolltemplate-fate .sheet-subheader,
.sheet-rolltemplate-chat .sheet-subheader {
  font-size: 0.9em;
    font-style: italic;  
}

.sheet-rolltemplate-fate .sheet-freeform,
.sheet-rolltemplate-chat .sheet-freeform {
    font-size: 0.8em;
}

.sheet-rolltemplate-fate td,
.sheet-rolltemplate-chat td {
    padding-left: 12px;
    padding-bottom: 5px;
    padding-right: 5px;
    font-size: 0.9em;
}

.sheet-rolltemplate-fate .inlinerollresult {
    border: solid 1px;
    border-color: #8a6d45;
    background-color: #ffffff;
    font-size: 1.1em;
    font-weight: bold;
}




.sheet-rolltemplate-fate th,
.sheet-rolltemplate-chat th {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 5px;
    text-align: left;
    font-size: 1.1em;
    font-variant: small-caps;
    line-height: 1.4em;
    color: #8a6d45;
}