roll20-character-sheets/The One Ring 2e/sheet.css

@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap');

/* reset all
.ui-dialog .charsheet select,
.ui-dialog .charsheet textarea,
.ui-dialog .charsheet input,
.ui-dialog .charsheet .uneditable-input,
.ui-dialog .charsheet label,
.ui-dialog .charsheet button{
  all: initial;
}
*/
.charsheet * {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif, sans-serif;
    font-weight: normal;
}

.charsheet,
.sheet-rolltemplate-tor,
.sheet-rolltemplate-msg {
    /* Define CSS variables */
    --red: rgb(176, 33, 30);
    --gray: rgb(65, 64, 64);
    --yellow: rgb(249, 246, 233);
    --solidborder: 1px solid var(--gray);
    --dark-secondarytext: black;
    --eyeofsauron: url('https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/The%20One%20Ring%202e/images/eye2.png');
    --gandalf: url('https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/The%20One%20Ring%202e/images/gandalf2.png');
    --borderred: url('https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/The%20One%20Ring%202e/assets/boxline-border-red1.png');
    --borderbrown: url('https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/The%20One%20Ring%202e/assets/boxline-border-brown1.png');
    --background: url('https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/The%20One%20Ring%202e/assets/background.jpg');
    padding: 0px;
}

/*Configure the tab buttons*/
.charsheet :is(.sheet-pc, .sheet-adversary) {
    display: none;
    position: relative;
    background: var(--background);
    background-color: var(--yellow);
    border: 10px solid transparent;
    border-image-source: var(--borderred);
    border-image-slice: 24 24 24 24;
    border-image-repeat: repeat;
    padding-right: 10px;
    z-index: 0;
    white-space: nowrap;
    overflow: hidden;
}

.charsheet .sheet-pc {
    min-width: 1200px;
    min-height: 600px;
}

/* show the selected tab */
.charsheet .sheet-tabstoggle[value="isPC"]~div.sheet-pc,
.charsheet .sheet-tabstoggle[value="isAdversary"]~div.sheet-adversary {
    display: block;
}

/* Generic element styles */
.charsheet :is(h1, h2, h3) {
    font-family: 'Uncial Antiqua', "Palatino Linotype", "Book Antiqua", Palatino, serif, sans-serif;
    font-weight: normal;
    line-height: 1;
    color: var(--red);
    text-transform: uppercase;
    font-size: medium;
    line-height: 25px;
    text-align: center;
}

.charsheet :is(h2, h3) {
    color: var(--gray);
    font-weight: lighter;
}

.charsheet h2 {
    font-size: small;
}

.charsheet h3 {
    font-size: smaller;
}

.charsheet span {
    color: black;
    font-size: small;
    text-align: left;
    padding: 0px 0px 0px 0px;
}

.charsheet label {
    display: inline;
    font-size: small;
    text-align: left;
    padding: 0px 0px 0px 0px;
    margin: 0;
}

.charsheet input,
.charsheet textarea {
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: rgba(255, 255, 255, .5);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.charsheet textarea {
    border: 2px solid rgba(0, 0, 0, .15);
    text-align: left;
}

.charsheet input:hover,
.charsheet textarea:hover,
.charsheet input:focus,
.charsheet textarea:focus {
    background: rgba(255, 255, 255, 1);
}

.charsheet input[type="text"],
.charsheet input[type="number"],
.charsheet input.sheet-number,
.charsheet select {
    background: none !important;
    border-radius: 0;
    border-bottom: 2px solid rgba(0, 0, 0, .15);
    text-align: left;
    margin-bottom: 2px;
}

.charsheet input[type="text"] {
    width: 150px;
}

.charsheet input.sheet-number {
    width: 3.5em !important;
}

.charsheet input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

.charsheet input[type="number"]::-webkit-inner-spin-button,
.charsheet input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* Combobox */
.charsheet select {
    width: min-content;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    line-height: 18px;
    height: 20px;
    padding: 0px 4px 0px 4px;
}

/* Checkboxes*/
.charsheet input[type="checkbox"] {
    padding: 0px !important;
    margin: 0px !important;
    width: 12px !important;
}

.charsheet :is(#skill-strength, #skill-heart, #skill-wits, #virtues, #rewards, #protection) input[type="checkbox"]:checked+label,
.charsheet :is(#skill-strength, #skill-heart, #skill-wits, #virtues, #rewards, #protection) input[type="checkbox"]:checked+span {
    text-decoration: underline;
}

.charsheet input[type='checkbox'],
.charsheet input[type='radio'] {
    accent-color: #AC4637;
}

/* Dots*/
.charsheet .sheet-dots {
    display: block;
    float: right;
    top: 2px;
    right: 0;
    -margin: 1px 15px 0px 0px;
}

.charsheet .sheet-dots input[type="radio"] {
    opacity: 0;
    width: 10px;
    height: 10px;
    position: relative;
    top: -4px;
    left: -4px;
    margin: -8px;
    cursor: pointer;
    z-index: 1;
    transform: rotate(45deg);
}

.charsheet .sheet-dots input[type="radio"]+span {
    margin: 5px 5px 0px -5px;
    line-height: 5px;
    font-size: 7px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.charsheet .sheet-dots input[type="radio"]+span:before {
    margin-right: 5px;
    display: inline-flex;
    text-align: center;
    --moz-animation-direction: top;
    line-height: 10px;
    width: 8px;
    height: 8px;
    content: "";
    opacity: 1;
    transform: rotate(45deg);
}

.charsheet .sheet-dots input[type="radio"][value="0"]+span:before {
    content: 'X';
    transform: unset;
    -color: #AC4637;
    opacity: 0.3;
    border: 0.5px solid grey;
    border-radius: 50%;
    margin-right: 8px;
    font-family: Papyrus, "Palatino Linotype", "Book Antiqua", Palatino, serif, sans-serif;
}

.charsheet .sheet-dots input[type='radio']:checked~input[type='radio']+span:before {
    background-size: 100%;
    border: 2px solid #AC4637;
    background-color: transparent;
    transform: rotate(45deg);
}

.charsheet .sheet-dots input[type="radio"]:not([value="0"])+span:before {
    background-size: 100%;
    border: 2px solid #AC4637;
    background-color: #AC4637;
    transform: rotate(45deg);
}

/* Remove dot from all radios _after_ selected one */
.charsheet .sheet-dots input[type="radio"]:checked~input[type="radio"]+span:before {
    content: "";
}

.charsheet .sheet-hover-info {
    display: block;
    position: absolute;
    background: white;
    z-index: 10;
    padding: 20px;
    width: 400px;
    height: fit-content;
    visibility: hidden;
    opacity: 0;
    box-shadow: 0 3px 15px rgba(0, 0, 0, .1);
    transition: visibility 0s linear 0.3s, opacity 0.3s linear;
    text-align: left;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    text-overflow: ellipsis;
    overflow: visible;
}

.charsheet span.label:hover+.sheet-hover-info,
.charsheet span.sheet-label:hover+.sheet-hover-info,
.charsheet input:hover+span.sheet-label+.sheet-hover-info,
.charsheet label:hover+.sheet-hover-info {
    visibility: visible;
    opacity: 1;
    transition-delay: 1s;
}

/* Diamond */
.charsheet :is(span.diamond-red, span.diamond) {
    display: inline-flex;
    box-sizing: content-box;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-self: center;
    border: 4px solid transparent;
    background-color: var(--bg-color);
    border-image-source: var(--borderbrown);
    border-image-slice: 24 24 24 24;
    border-image-repeat: repeat;
    width: 35px;
    height: 35px;
    transform: rotate(45deg);
}

.charsheet span.diamond-red {
    border-image-source: var(--borderred);
}

.charsheet span[class|="diamond"] input[type="number"] {
    border-bottom: 0;
}

.charsheet :is(span.diamond-red, span.diamond) span {
    background-color: var(--bg-color);
    transform: rotate(-45deg);
    border: 0;
}

.charsheet :is(span.diamond-small-red, span.diamond-small) {
    display: inline-flex;
    box-sizing: content-box;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    border: 4px solid transparent;
    background-color: var(--bg-color);
    border-image-source: var(--borderbrown);
    border-image-slice: 24 24 24 24;
    border-image-repeat: repeat;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
}

.charsheet span.diamond-small-red {
    border-image-source: var(--borderred);
}

.charsheet :is(span.diamond-small-red, span.diamond-small) span {
    background-color: var(--bg-color);
    transform: rotate(-45deg);
    border: 0;
}

.charsheet .hidden {
    display: none;
}

/* Borders */
.charsheet #content :is(#strength, #wits, #skill-strength, #skill-heart, #skill-wits, #conditions, #mount) {
    border: 6px solid transparent;
    /* background-color: var(--bg-color); */
    border-image-source: var(--borderbrown);
    border-image-repeat: repeat;
    margin: 0;
    box-sizing: border-box;
}

.charsheet #content #strength {
    border-image-slice: 24 0 24 24;
    border-top: 0;
    border-bottom: 0;
}

.charsheet #content #skill-strength {
    border-image-slice: 24 24 24 24;
    border-top: 0;
    border-right: 0;
    padding-bottom: 10px;
    margin-top: -10px;
}

.charsheet #content #skill-heart {
    border-image-slice: 24 0 24 24;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    padding-bottom: 10px;
    margin-top: -10px;
}

.charsheet #content #skill-wits {
    border-image-slice: 24 24 24 0;
    border-left: 0;
    border-top: 0;
    padding-bottom: 10px;
    margin-top: -10px;
}

.charsheet #content #wits {
    border-image-slice: 24 24 24 0;
    border-top: 0;
    border-bottom: 0;
}

.charsheet #content :is(#mount, #conditions) {
    border-image-slice: 24 24 24 24;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

/* CSS for pc sheet*/
.charsheet .left {
    justify-self: left !important;
    text-align: left !important;
}

.charsheet .right {
    justify-self: right !important;
    text-align: right !important;
}

.charsheet .center {
    justify-self: center !important;
    text-align: center !important;
}

.charsheet .strong {
    font-size: large;
    font-weight: bold;
}

/* needed for hover infos */
.charsheet .sheet-strong {
    font-weight: bold;
}

.charsheet .bordertop {
    margin: 0px 20px 0px 20px;
    border-top: var(--solidborder);
}

.charsheet .borderbottom {
    padding: 0px 20px 0px 20px !important;
    border-bottom: var(--solidborder);
}

.charsheet .sheet-row {
    padding-left: 10px;
    padding-right: 10px;
}

/* Spanning element styles for PC Sheet */
.charsheet :is(#experience-nested, #protection-nested) input {
    width: 1.5em;
    text-align: center;
    padding: 0;
    margin: 0px 0px 0px 0px;
}

.charsheet :is(#experience-nested, #protection-nested) span {
    text-align: center;
}

.charsheet :is(#experience-nested, #protection-nested, #skill-strength, #skill-heart, #skill-wits, #combat) label {
    text-align: center;
}

/* Specific area styles for PC sheet */
.charsheet #content {
    position: relative;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-auto-rows: minmax(10px, auto);
    grid-template-areas:
        'char char char char rewa rewa virt virt gear gear'
        'cond cond stre stre hear hear wits wits expe expe'
        'cond cond skst skst skhe skhe skwi skwi moun moun'
        'comb comb warg warg warg warg warg armo armo prot';
    /* Testing without prot prot */
    grid-gap: 0px;
}

.charsheet #content>* {
    width: 100%;
    padding: 5px;
    margin: 0px;
    text-align: center;
}

.charsheet #character {
    grid-area: char;
}

.charsheet #character-nested .onecol {
    display: grid;
    grid-auto-rows: minmax(auto, 1.5em);
    grid-template-columns: 100px 3fr;
}

.charsheet #character-nested .twocols {
    display: grid;
    grid-auto-rows: minmax(auto, 1.5em);
    grid-template-columns: 100px 3fr 100px 3fr;
}

.charsheet #character-nested input {
    font-size: small;
    text-align: left;
    width: 100%;
}

.charsheet #gear {
    grid-area: gear;
}

.charsheet #rewards {
    grid-area: rewa;
}

.charsheet #virtues {
    grid-area: virt;
}

.charsheet :is(#gear, #rewards, #virtues) textarea {
    margin: 10px 10px 0px 10px;
    max-height: 120px;
    min-height: 120px;
    height: 115px;
    max-width: 300px;
    min-width: 200px;
    width: 95%;
    overflow-y: auto;
    overflow-x: hidden;
    resize: none;
    scrollbar-width: thin;
    scrollbar-color: darkgrey lightgrey;
    cursor: auto;
}

.charsheet :is(#gear, #rewards, #virtues) textarea::-webkit-scrollbar {
    width: 6px;
    margin-left: 4px;
    cursor: pointer !important;
}

.charsheet :is(#gear, #rewards, #virtues) textarea::-webkit-scrollbar-track {
    border-radius: 3px;
    background: darkgrey;
}

.charsheet :is(#gear, #rewards, #virtues) textarea::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: gray;
}

.charsheet :is(#gear, #rewards, #virtues) textarea::-webkit-scrollbar-thumb:hover {
    background: black;
}

/* NEW Valour and Wisdom */
.charsheet :is(#virtues, #rewards) h2 {
    text-align: left;
    text-indent: 15px;
}

.charsheet :is(#virtues, #rewards, #gear) div {
    display: flex;
    flex-wrap: nowrap;
    justify-content: end;
    margin-top: -25px;
}

.charsheet #virtues div {
    margin-right: 10px;
}

.charsheet :is(#virtues, #rewards) label {
    padding-right: 10px;
}

.charsheet :is(#virtues, #rewards) .diamond-small-red input {
    text-align: center;
}

.charsheet #gear .diamond-small-red {
    opacity: 0;
}

/* End Valour and Wisdom */

.charsheet #experience {
    grid-area: expe;
}

.charsheet #experience-nested {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: min-content;
    justify-items: center;
}

.charsheet #experience-nested button {
    padding: 0;
    margin: 0;
}

/* Attribute grids */
.charsheet :is(#strength, #heart, #wits) h1 {
    margin-bottom: 10px;
}

.charsheet #strength {
    grid-area: stre;
    border-left: var(--solidborder);
}

.charsheet #heart {
    grid-area: hear;
}

.charsheet #wits {
    grid-area: wits;
    border-right: var(--solidborder);
}

.charsheet :is(#strength, #heart, #wits) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.charsheet :is(#strength, #heart, #wits) input {
    text-align: center;
}

.charsheet :is(.attribute-row1, .attribute-row3) {
    display: grid;
    grid-template-columns: 45px 30px 70px 30px 45px;
}

.charsheet .attribute-row2 {
    display: grid;
    grid-template-columns: 60px 40px 20px 40px 60px;
    align-items: center;
}

.charsheet div.attribute label.left {
    white-space: break-spaces;
    margin-left: 12px;
}

.charsheet div.attribute label.right {
    white-space: break-spaces;
    margin-right: 12px;
}

.charsheet div.attribute .attribute-row1 .left {
    position: relative;
    bottom: 10px;
    right: 10px;
}

.charsheet div.attribute .attribute-row1 .right {
    position: relative;
    bottom: 10px;
    left: 5px;
}

.charsheet div.attribute .attribute-row3 .left {
    position: relative;
    top: 20px;
    right: 5px;
}

.charsheet div.attribute .attribute-row3 .right {
    position: relative;
    top: 20px;
    left: 5px;
}

.charsheet div.attribute .attribute-row3 div.center {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    bottom: 8px;
}

.charsheet div.attribute input {
    text-align: center;
}

/* Skills */
.charsheet #skill-strength {
    grid-area: skst;
    border-left: var(--solidborder);
    border-bottom: var(--solidborder);
}

.charsheet #skill-heart {
    grid-area: skhe;
    border-bottom: var(--solidborder);
}

.charsheet #skill-wits {
    grid-area: skwi;
    border-right: var(--solidborder);
    border-bottom: var(--solidborder);
}

.charsheet :is(#skill-strength, #skill-heart, #skill-wits) {
    text-align: left;
    padding-top: 0px;
    margin-right: 10px;
    height: fit-content;
    padding-bottom: 10px;
}

.charsheet #conditions {
    grid-area: cond;
    padding: 0px 0px 0px 0px;
    border-bottom: var(--solidborder);
}

.charsheet #conditions-nested {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(2, 22px);
    padding: 0px 10px 0px 20px;
}

.charsheet #combat {
    grid-area: comb;
    text-align: left;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 5px;
    min-width: 0;
    width: 95%
}

.charsheet #war-gear {
    grid-area: warg;
}

.charsheet #war-gear-nested {
    display: grid;
    grid-template-columns: min-content 4fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 4fr;
    grid-template-rows: repeat(7, 22px);
    padding: 10px 0px 0px 10px;
    text-align: left;
}

.charsheet #war-gear-nested input[type="checkbox"],
.charsheet #armour-nested input[type="checkbox"] {
    text-align: center;
    vertical-align: sub;
}

.charsheet #war-gear-nested select,
.charsheet #armour-nested select {
    appearance: none;
    justify-self: center;
    text-align: center;
}

.charsheet #armour {
    grid-area: armo;
    z-index: 1;
}

.charsheet #armour-nested {
    display: grid;
    grid-template-columns: min-content 130px min-content min-content min-content min-content;
    grid-template-rows: repeat(6, 22px);
    column-gap: 5px;
    justify-items: left;
    padding: 0px 0px 0px 5px;
    border-left: var(--solidborder);
    margin-top: 10px;
}

.charsheet #protection {
    grid-area: prot;
    padding: 0px 0px 0px 0px;
    z-index: 0;
}

.charsheet #protection-nested {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 20px 60px 20px 40px 20px;
    padding: 0px 0px 0px 40px;
    justify-items: center;
    align-items: center;
    text-align: center;
}

.charsheet #protection-nested-alt input {
    text-align: center;
}

.charsheet #mount {
    grid-area: moun;
    border-bottom: var(--solidborder);
}

.charsheet #mount-nested {
    display: grid;
    grid-template-columns: 130px min-content min-content;
    grid-template-rows: repeat(2, 22px);
    column-gap: 5px;
    justify-items: left;
    padding: 0px 0px 0px 10px;
    border-left: unset;
    margin-top: 15px;
}

.charsheet :is(#war-gear-nested, #armour-nested, #mount-nested) h2 {
    margin-top: -8px;
    text-align: left;
    text-indent: 5px;
}

.charsheet :is(#war-gear-nested, #armour-nested, #mount-nested) input[type="text"] {
    width: 95%;
}

.charsheet :is(#war-gear-nested, #armour-nested, #mount-nested, #combat) input[type="number"] {
    width: 2em;
    text-align: center;
}

.charsheet #notes {
    background-color: var(--yellow);
    grid-column: 1 / span 12;
    grid-row: 4 / span 2;
    width: 100%;
    z-index: 100;
    display: none;
}

.charsheet .sheet-notestoggle[value="1"]~#notes {
    display: block;
}

.charsheet #notes-nested {
    display: grid;
    grid-template-columns: minmax(245px, 1fr) 10fr;
    grid-auto-rows: auto;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.charsheet #notes .notes-text {
    grid-column: 2 / span 1;
    grid-row: 1 / span 4;
    display: none;
}

.charsheet #notes textarea {
    height: 100%;
}

.charsheet .sheet-notestoggle[value="1"]~#notes {
    display: block;
}

.charsheet .sheet-notestabtoggle[value="notes1"]~#notes-text1 {
    display: block;
}

.charsheet .sheet-notestabtoggle[value="notes2"]~#notes-text2 {
    display: block;
}

.charsheet .sheet-notestabtoggle[value="notes3"]~#notes-text3 {
    display: block;
}

.charsheet .sheet-notestabtoggle[value="notes4"]~#notes-text4 {
    display: block;
}

/* Parsed rolls */
.ui-dialog .charsheet :is(button[type="roll"],
    button[type="roll"][class~="table-rolls"],
    button[type="action"][class~="parsed-rolls"]) {
    font-size: 1.3em;
    background: transparent;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    opacity: 1;
    padding: 0px;
    margin: 0px 0px;
    outline: none;
    height: 100%;
    vertical-align: middle;
}

.ui-dialog .charsheet :is(button[type="roll"][class~="table-rolls"],
    button[type="roll"][class~="parsed-rolls"],
    button[type="action"][class~="parsed-rolls"]):hover {
    opacity: .5;
}

.ui-dialog .charsheet button[class~="crosshair"]::before {
    /* change D12 to target-appropriate crosshairs */
    font-family: "Pictos Custom" !important;
    content: "[" !important;
    color: inherit;
    opacity: 0.3;
}

.ui-dialog .charsheet :is(button[type="roll"][class~="table-rolls"],
    button[type="roll"][class~="parsed-rolls"],
    button[type="action"][class~="parsed-rolls"])::before {
    /* change D20 to system-appropriate D12 */
    font-family: "dicefontd12";
    content: "0";
}

.charsheet input.config-parsed-rolls~div .parsed-rolls,
.charsheet input.config-parsed-rolls:checked~div .table-rolls {
    display: none;
}

.charsheet input.config-parsed-rolls~div .table-rolls,
.charsheet input.config-parsed-rolls:checked~div .parsed-rolls {
    display: inline-block;
}

/* Adversary */
.charsheet .sheet-adversary {
    min-width: 850px;
    min-height: 500px;
    padding: 0px 20px 0px 20px;
}

.charsheet .adversary-header,
.charsheet .adversary-attributes,
.charsheet .adversary-combat-proficiencies,
.charsheet .adversary-fell-abilities {
    margin: 0px 0px 00px 0px;
    padding: 10px 10px 0px 10px
}

.charsheet .adversary-header {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: repeat(4, min-content);
    justify-items: center;
    margin: 0px;
    width: 100%;
}

.charsheet .adversary-level {
    grid-column: 2;
    grid-row: 2 / span 4;
    justify-self: center;
    padding-top: 10px;
}

.charsheet .adversary-header>input {
    text-align: left;
    justify-self: left;
    width: 75%
}

.charsheet .adversary-attributes {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 1.5fr 2fr 1fr;
    text-align: center;
    justify-items: center;
    width: 100%;
}

.charsheet .adversary-attributes select {
    font-family: 'Uncial Antiqua', "Palatino Linotype", "Book Antiqua", Palatino, serif, sans-serif;
    font-size: medium;
    font-weight: normal;
    color: var(--red);
    text-transform: uppercase;
    text-align: center;
    margin: 0px;
    padding: 0px;
    height: min-content;
    width: min-content;
    border: unset;
}


.charsheet .adversary-attributes input {
    text-align: center;
}

.ui-dialog .charsheet .adversary-attributes button:is([type="roll"], [type="action"]) {
    padding-top: 5px;
}

.charsheet .adversary-combat-proficiencies {
    display: grid;
    grid-template-columns: 250px 60px 60px 60px auto;
    grid-template-rows: repeat(3, 1fr);
}

.charsheet .adversary-combat-proficiencies input[type="text"],
.charsheet .adversary-fell-abilities input[type="text"] {
    text-align: left;
    width: auto;
}

.charsheet .adversary-combat-proficiencies input[type="number"],
.charsheet .adversary-fell-abilities input[type="number"] {
    text-align: center;
    justify-self: center;
    width: 2.5em
}

.charsheet .adversary-fell-abilities {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: repeat(4, auto);
    justify-items: left;
    grid-gap: 0px;
}

.charsheet .adversary-fell-abilities :is(label, textarea[name^="attr_fell_ability_desc"]) {
    width: 100%;
    height: auto;
    word-wrap: break-word;
    resize: vertical;
    overflow: auto;
}

.charsheet .adversary-notes textarea {
    box-sizing: border-box;
    overflow: auto;
    resize: vertical;
    height: auto;
    width: 100%;
}

/* Roll Template */
.sheet-rolltemplate-tor,
.sheet-rolltemplate-msg {
    margin-left: -7px;
    padding-top: 10px;
    background: transparent;
    color: black !important;
}

.sheet-rolltemplate-tor div,
.sheet-rolltemplate-msg div,
.sheet-rolltemplate-tor span,
.sheet-rolltemplate-msg span {
    font-family: Papyrus, 'Book Antiqua', Palatino, serif, sans-serif;
    font-weight: bold;
    font-size: 13px;
}

.sheet-rolltemplate-tor .sheet-container,
.sheet-rolltemplate-msg .sheet-container {
    background: var(--background);
    background-color: var(--yellow);
    border: 5px solid transparent;
    border-image-source: var(--borderred);
    border-image-slice: 24 24 24 24;
    border-image-repeat: repeat;
}

.sheet-rolltemplate-tor .sheet-content {
    border-top: 1px solid #000;
    height: 205px;
}

.sheet-rolltemplate-msg .sheet-contentmin {
    border-top: 1px solid #000;
    padding-top: 10px;
    height: min-content;
}

.sheet-rolltemplate-msg .sheet-contentmin .sheet-main-alt span {
    border: 0px !important;
    background-color: transparent !important;
}

.sheet-rolltemplate-tor .sheet-red,
.sheet-rolltemplate-tor .sheet-red span {
    color: black;
}

/* Header formatting - title and subtitle */
.sheet-rolltemplate-tor .sheet-header,
.sheet-rolltemplate-msg .sheet-header {
    /* change text-align to center to center the header text */
    text-align: left;
    color: black;
    padding: 5px;
}

.sheet-rolltemplate-tor .sheet-footer,
.sheet-rolltemplate-msg .sheet-footer {
    padding: 5px;
    margin-top: -5px;
}

.sheet-rolltemplate-tor .sheet-title,
.sheet-rolltemplate-msg .sheet-title {
    font-family: 'Uncial Antiqua', "Palatino Linotype", "Book Antiqua", Palatino, serif, sans-serif;
    font-weight: lighter;
    line-height: 1;
    color: rgb(176, 33, 30);
    font-size: medium;
    line-height: 25px;
}

.sheet-rolltemplate-tor .sheet-subtitle,
.sheet-rolltemplate-msg .sheet-subtitle {
    font-size: 13px;
}

.sheet-rolltemplate-tor .sheet-text-center,
.sheet-rolltemplate-msg .sheet-text-center {
    text-align: center;
}

.sheet-rolltemplate-tor .sheet-center,
.sheet-rolltemplate-msg .sheet-center {
    display: inline-flex;
    box-sizing: border-box;
    flex-wrap: nowrap;
    justify-content: center;
    justify-self: center;
    text-align: center;
}

.sheet-rolltemplate-tor .sheet-full-col {
    display: inline-flex;
    box-sizing: content-box;
    flex-wrap: nowrap;
    justify-content: center;
    justify-self: center;
    width: 99%;
}

.sheet-rolltemplate-tor .sheet-half-col {
    display: inline-flex;
    box-sizing: content-box;
    flex-wrap: nowrap;
    justify-content: center;
    justify-self: center;
    width: 49%;
}

.sheet-rolltemplate-tor div.sheet-die-result span.sheet-rotated-box {
    display: inline-flex;
    box-sizing: content-box;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-self: center;
    border: 4px solid transparent;
    background-color: var(--yellow);
    border-image-source: var(--borderbrown);
    border-image-slice: 24 24 24 24;
    border-image-repeat: repeat;
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
}

.sheet-rolltemplate-tor div.sheet-die-result span.sheet-rotated-box span {
    background-color: var(--yellow);
    transform: rotate(-45deg);
    border: 0;
}

.sheet-rolltemplate-tor .sheet-die-title.sheet-target-number {
    margin-top: 5px;
    margin-bottom: 10px;
}

.sheet-rolltemplate-tor .sheet-target-number .sheet-rotated-box,
.sheet-rolltemplate-tor .sheet-roll-total .sheet-rotated-box {
    background-color: var(--yellow);
}

.sheet-rolltemplate-tor .sheet-target-number .sheet-rotated-box span,
.sheet-rolltemplate-tor .sheet-roll-total .sheet-rotated-box span {
    color: black;
}

.sheet-rolltemplate-tor div.sheet-feat-die {
    justify-content: flex-end;
}

.sheet-rolltemplate-tor .sheet-feat-die .sheet-rotated-box {
    position: relative;
    top: -45px;
    right: 12px;
}

.sheet-rolltemplate-tor div.sheet-success-die {
    justify-content: flex-start;
}

.sheet-rolltemplate-tor .sheet-success-die .sheet-rotated-box {
    position: relative;
    top: -45px;
    left: 12px;
}

.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-rotated-box,
.sheet-rolltemplate-tor div.sheet-success-die span.sheet-rotated-box {
    width: 45px !important;
    height: 45px !important;
    border: 5px solid transparent;
    border-image-source: var(--borderred);
    border-image-slice: 24 24 24 24;
    border-image-repeat: repeat;
}

.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-rotated-box span,
.sheet-rolltemplate-tor div.sheet-success-die span.sheet-rotated-box span {
    font-size: 20px;
}

.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-fullcrit,
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-fullfail,
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-gandalf,
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-eye {
    opacity: 0;
}

.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-rotated-box .sheet-fullcrit {
    z-index: 100;
}

.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-rotated-box .sheet-fullfail {
    z-index: 100;
}

.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-gandalf,
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-eye {
    position: absolute;
    opacity: 1;
    background-color: var(--yellow);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}

.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-gandalf {
    top: 12px;
    ;
    right: 12px;
    width: 20px;
    height: 19px;
    background-size: 1em;
    background-image: var(--gandalf);
}

.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-eye {
    top: 15px;
    ;
    right: -2px;
    width: 50px;
    height: 15px;
    background-size: 2em;
    background-image: var(--eyeofsauron);
}

.sheet-rolltemplate-tor .sheet-feat-label {
    position: relative;
    top: -30px;
    right: 35px;
}

.sheet-rolltemplate-tor .sheet-success-label {
    position: relative;
    top: -32px;
    margin-bottom: -18px;
    text-align: end;
    left: 25px;
}

.sheet-rolltemplate-tor .sheet-favoured,
.sheet-rolltemplate-tor .sheet-modification,
.sheet-rolltemplate-tor .sheet-miserable,
.sheet-rolltemplate-tor .sheet-weary {
    position: relative;
    top: -50px;
}

.sheet-rolltemplate-tor .sheet-favoured,
.sheet-rolltemplate-tor .sheet-miserable {
    right: 28px;
}

.sheet-rolltemplate-tor .sheet-modification,
.sheet-rolltemplate-tor .sheet-weary {
    left: 30px;
}

.sheet-rolltemplate-tor .sheet-roll-total {
    position: relative;
    top: -91px;
}

.sheet-rolltemplate-tor .sheet-roll-diff {
    position: relative;
    top: -73px;
}

.sheet-rolltemplate-tor .sheet-roll-total.sheet-die-title {
    margin-top: 8px;
}

.sheet-rolltemplate-tor .sheet-roll-diff.sheet-die-title {
    margin-top: 5px;
}

.sheet-rolltemplate-tor .sheet-roll-outcome {
    position: relative;
    top: -85px;
    display: flex;
    align-self: center;
    text-align: center;
    background-color: transparent;
}

.sheet-rolltemplate-tor .sheet-roll-outcome div.sheet-die-title {
    display: flex;
    align-self: center;
    padding: 3px;
    background-color: #AC4637;
    border: 2px solid #AC4637;
    color: #FFF;
    width: fit-content;
}

.sheet-rolltemplate-tor .sheet-roll-outcome span {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: 0;
}

.sheet-rolltemplate-tor .sheet-additional {
    padding: 3px;
}