.charsheet {
    background-image: url(https://raw.githubusercontent.com/Drazili/Legends-Roll20/refs/heads/main/Legends%20background.png);
    background-position: top center;
    background-repeat: no-repeat;
    object-fit: contain;
    background-size: contain;
}

div.mainsheet {
    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-gap: 10px;
}

div.twoFifths {
    grid-column-end: span 2;
}

div.threeFifths {
    grid-column-end: span 3;
}

div.gap {
    padding-top: 10px;
}
.space {
    padding-right: 10px;
}


section {
    border: 5px solid black;
    padding-left: 10px;
    padding-right: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: white;

}

.sectionHeader {
    background-color: black;
    color: white;
    padding-left: 5px;
    margin-bottom: 2px;
}

.sectionContent {
    display: grid;
    grid-template-columns: repeat(12, auto);
}

.sectionContentStyle {
    border-top: 1px solid black;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 5px;
    padding-right: 2px;
    display: flex;
}

.sectionContentAll {
    grid-column-end: span 12;
}

.sectionContentExtraLarge {
    grid-column-end: span 8;
}

.sectionContentHalf {
    grid-column-end: span 6;
}

.sectionContentLarge {
    grid-column-end: span 4;
}

.sectionContentQuarter {
    grid-column-end: span 3;
}

.sectionContentMedium {
    grid-column-end: span 2;
}

.sectionContentSmall {
    grid-column-end: span 1;
}

label.label {
    font-size: 75%;
    margin-bottom: 0px;
}

.label {
    background-color: gray;
    border-radius: 0px;
    text-align: left;
}

.logo {
    max-height: 13.5em;

}

img.logo {
    display: block;
    margin: auto;
}

.label input[type="radio"]:checked + span{
    background-color: #6f319c;
    color: #f6b91e;
}

.tinyInput, input[type=number].tinyInput {
    width: 3em !important;
}

.smallInput {
    width: 3.5em;
}

.mediumInput {
    width: 7em;
}

.extraMediumInput {
    width: 10em;
}

.largeInput {
    width: 180px;
}

.extraLargeInput {
    width: 25em;
}

.dividerLeft {
    border-left: 1px solid black;
}

input {
    accent-color: #6f319c;
}

select {
    margin-bottom: 0px;
}

textarea {
    box-sizing: border-box;
    min-width: auto;
    max-width: 100%;
}

textarea.notes {
    height: 44em;
}

textarea.personalityTraits {
    height: 8.3em;
}

textarea.secretIdentity {
    height: 5em;
}

textarea.backgroundInfo {
    height: 17em;
}

.tabButton {
    background-color: black;
}

.tabs:not([value="combat_tab"]) ~ .combat_tab,
.tabs:not([value="powers_tab"]) ~ .powers_tab,
.tabs:not([value="details_tab"]) ~ .details_tab,
.tabs:not([value="notes_tab"]) ~ .notes_tab {
    display: none;
}

.tabs[value="combat_tab"] ~ div .combat_tab_button,
.tabs[value="powers_tab"] ~ div .powers_tab_button,
.tabs[value="details_tab"] ~ div .details_tab_button,
.tabs[value="notes_tab"] ~ div .notes_tab_button {
    /* background-color: white;
    color: black; */
    background-color: #6f319c;
    color: #f6b91e;
}


.spanTitle {
    font-size: 90%;
    text-align: left;
    align-items: center;
}

.tab{
    grid-gap: 10px;
}

.ui-dialog .charsheet button[type=roll], .charsheet .repcontrol_add, .charsheet .repcontrol_edit, .charsheet .repcontrol_move {
    background-color: #6f319c;
    color: #f6b91e;
    background-image: none;
}

.ui-dialog .charsheet button[type=roll].chatButton:before  {
    content: "";
}