Custom character sheet shows in preview but formatting not working ingame

I'm running a fading suns game and have been using the 2nd ed revised character sheet but we are playing the 2nd ed from Holistic and not FASA.  So I've been trying to modify it to work, the rules look like they are working . But the format isn't well not in the game. It looks okay in the preview window however. Any ideas what I maybe doing wrong ?

The preview window is not a reliable indicator of how the sheet will look, don't rely on it for other than checking superficial changes. <a href="https://wiki.roll20.net/BCS#Preview_Panel" rel="nofollow">https://wiki.roll20.net/BCS#Preview_Panel</a>

Hi James, You might share a screenshot and some code (gist or pastebin are best for complete code) to help others find a solution.&nbsp; And, yes, the preview isn't always the best representation of how the sheet will actually be seen in the vtt. ;-(

html, .sheet-fadingsuns { &nbsp; &nbsp; box-sizing: border-box; &nbsp; &nbsp; min-width: 1200px; } *,*::after,*::before { &nbsp; &nbsp; box-sizing: border-box; } .textchatcontainer .inlinerollresult { &nbsp; &nbsp; padding: 0; } input { &nbsp; &nbsp; width: auto; &nbsp; &nbsp; height: initial; &nbsp; &nbsp; padding: 3px; &nbsp; &nbsp; margin: 0; &nbsp; &nbsp; background: rgba(255, 255, 255, 0.8); } input [type=text] { &nbsp; &nbsp; width: 50px; } input[type=number] { &nbsp; &nbsp; text-align: center; } input[type=number]::-webkit-inner-spin-button,&nbsp; input[type=number]::-webkit-outer-spin-button {&nbsp; &nbsp; -webkit-appearance: none;&nbsp; &nbsp; margin: 0;&nbsp; } b { &nbsp; &nbsp; font-weight:bold; } label { &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; font-size: inherit; &nbsp; &nbsp; margin-bottom: initial; &nbsp; &nbsp; padding-right: initial; &nbsp; &nbsp; width: initial; &nbsp; &nbsp; height: initial; &nbsp; &nbsp; color: initial; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; font-weight: bold; } select { &nbsp; &nbsp; width: initial; &nbsp; &nbsp; height: initial; &nbsp; &nbsp; margin: initial; &nbsp; &nbsp; padding:initial; &nbsp; &nbsp; padding:0; &nbsp; &nbsp; margin: 0; } textarea { &nbsp; &nbsp; width: 50px; &nbsp; &nbsp; height: initial; &nbsp; &nbsp; resize: initial; &nbsp; &nbsp; overflow-x: hidden; &nbsp; &nbsp; overflow-y: auto; &nbsp; &nbsp; padding: 0; &nbsp; &nbsp; margin: 0; } button, button:hover, button:active { &nbsp; &nbsp; background-image: initial; } button[type="roll"] { &nbsp; &nbsp; margin-left: initial; &nbsp; &nbsp; margin-right: initial; &nbsp; &nbsp; text-shadow: none; } button[type=roll]:before { &nbsp; &nbsp; vertical-align: middle; &nbsp; &nbsp; font-size: 1.2em; } h1 { &nbsp; &nbsp; font-size: 1.5rem; &nbsp; &nbsp; line-height: 1em; &nbsp; &nbsp; clear: both; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; display: block; &nbsp; &nbsp; width: 100%; &nbsp; &nbsp; min-height: 1.1em; &nbsp; &nbsp; background-color: Black; &nbsp; &nbsp; color: White; &nbsp; &nbsp; padding: .25em 0 .125em 0; &nbsp; &nbsp; margin-bottom: .15em; } h2 { &nbsp; &nbsp; line-height: 1.4em; &nbsp; &nbsp; height: 1.4em; &nbsp; &nbsp; margin-top: .33em; &nbsp; &nbsp; font-size: 1.3rem; &nbsp; &nbsp; color: initial; } h3,h4,h5,h6 { &nbsp; &nbsp; line-height: 1em; &nbsp; &nbsp; font-size: 1.3rem; &nbsp; &nbsp; color: initial; } .sheet-fadingsuns { &nbsp; &nbsp; width: 100%; &nbsp; &nbsp; min-width: 100%; &nbsp; &nbsp; margin-top: -1em; } /* standalone generic toggles */ .sheet-repeating-sect-show { &nbsp; &nbsp; display: none ; } .sheet-fs-clickheader { &nbsp; &nbsp; display:inline; } /* turn off spinners for all number field in firefox */ input[type="number"] { &nbsp; &nbsp; -moz-appearance: textfield !important; } input[type="text"], input[type="number"] { &nbsp; &nbsp; border: 0 solid #666; &nbsp; &nbsp; border-bottom-width: 0.1rem; &nbsp; &nbsp; margin-top: 0.1rem; } input[type="text"] { &nbsp; &nbsp; min-width: 1em; } input[type="text"], input[type="number"], textarea { &nbsp; &nbsp; color:#222; &nbsp; &nbsp; background-color: white; } .sheet-fs-inline-textarea { &nbsp; &nbsp; min-height: 2.15em; &nbsp; &nbsp; margin: 0; &nbsp; &nbsp; resize: vertical; &nbsp; &nbsp; overflow:auto; } .sheet-fadingsuns .repcontrol_del, .sheet-fadingsuns .repcontrol_move, .sheet-fadingsuns .repcontrol_add, .sheet-fadingsuns .repcontrol_edit { &nbsp; &nbsp; font-family: pictos; } /* button sizing based on arial*/ .sheet-fadingsuns span::before, .sheet-fadingsuns span::after { &nbsp; &nbsp; font-family: Arial, sans-serif; } /* set width for number input and surrounding labels */ input[type="number"] { &nbsp; &nbsp; min-width: 2.5em; &nbsp; &nbsp; width: auto; } .sheet-fs-h2-section { &nbsp; &nbsp; position: relative; &nbsp; &nbsp; clear: both; &nbsp; &nbsp; height: auto; &nbsp; &nbsp; width: 100%; &nbsp; &nbsp; vertical-align: top; } /* make error row more visible (colorblind users could not see slightly darker border ) also need 1 more level in selector or base css will override border */ .sheet-fadingsuns .repitem.repitembroken { &nbsp; &nbsp; border: 0.3rem dashed #FF0044 !important; &nbsp; &nbsp; margin: 0.2rem 0 0.4rem 0; &nbsp; &nbsp; border-radius: 0; } .sheet-fs-secondary-table-name { &nbsp; &nbsp; display: table-caption; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; color: White; &nbsp; &nbsp; background-color: #4a6486; &nbsp; &nbsp; width: 100%; } .sheet-fs-nontable-name.sheet-fs-secondary-table-name, .sheet-table-name.sheet-fs-secondary-table-name { &nbsp; &nbsp; background-color: #4a6486; } .sheet-fs-small-label2 &gt; select.sheet-select-small { &nbsp; &nbsp; height: 2em; } /* CHROME: hide spinner area at right when not hovering over a number */ input[type="number"]:not(:hover)::-webkit-inner-spin-button { &nbsp; &nbsp; -webkit-appearance: none; &nbsp; &nbsp; margin-right: 0; } /* the label underneath button*/ .sheet-fs-small-label2 &gt; .sheet-csstextbutton + span + span, .sheet-fs-small-label2 &gt; .sheet-cssbutton + span + span { &nbsp; &nbsp; display:block; } .sheet-fs-showarrow { &nbsp; &nbsp; opacity: 0; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; top: 0; &nbsp; &nbsp; left: 0; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; z-index: 5; } input.sheet-fs-showarrow { &nbsp; &nbsp; height: 1.6em; } h2 label { &nbsp; &nbsp; color: inherit !important; } .sheet-ack-button + .sheet-fs-showsect::before, .sheet-fs-showarrow + .sheet-fs-showsect::before { &nbsp; &nbsp; margin-right: .25em; } .sheet-ack-button + .sheet-fs-showsect::before, .sheet-fs-showarrow + .sheet-fs-showsect::before { &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; content: '►'; &nbsp; &nbsp; width: 1em; &nbsp; &nbsp; height: 1em; &nbsp; &nbsp; font-size: 1em; &nbsp; &nbsp; color: DarkGray; } .sheet-fs-showarrow.sheet-npc-details-show + .sheet-fs-showsect::before { &nbsp; &nbsp; color:White; &nbsp; &nbsp; padding-top:.5em; &nbsp; &nbsp; padding-left:.5em; } .sheet-fs-showarrow:checked + .sheet-fs-showsect::before { &nbsp; &nbsp; content: '▼'; } .sheet-fs-showsect, .sheet-fs-clickheader { &nbsp; &nbsp; position: relative; } .sheet-fs-showsect, h2.sheet-fs-clickheader { &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; margin-left: -.25em; } .sheet-fs-showarrow.sheet-fs-h2arrow { &nbsp; &nbsp; width: 1.5em; &nbsp; &nbsp; margin-right: -1.5em; } .sheet-split-column-show:not(:checked) ~ .sheet-repeating-fields .sheet-sect.sheet-expand .sheet-fs-showarrow:first-child { &nbsp; &nbsp; margin-left: .125em; } .sheet-sect.sheet-expand .sheet-fs-showsect { &nbsp; &nbsp; margin-right: 1em; } .sheet-fs-showarrow:hover + .sheet-fs-showsect:not(.sheet-fs-showsect-nocolor), .sheet-fs-showarrow:hover + .sheet-fs-showsect::before { &nbsp; &nbsp; color: Red; } .repcontrol_edit { &nbsp; &nbsp; order: 2; } .repcontainer.editmode .repitem .itemcontrol { &nbsp; &nbsp; z-index: 3; &nbsp; &nbsp; background-color: gray; &nbsp; &nbsp; background-color: rgba(220, 220, 220, 0.40); } .sheet-repeating-sect { &nbsp; &nbsp; position: relative; } .sheet-table-rollbuttoncell, .sheet-table.cell .sheet-table-rollbuttoncell, .sheet-fs-small-label2.sheet-table-rollbuttoncell { &nbsp; &nbsp; vertical-align:top; } /*Expand to cross both columns */ div.repcontrol { &nbsp; &nbsp; display: flex; &nbsp; &nbsp; flex-wrap: nowrap; &nbsp; &nbsp; align-items: center; &nbsp; &nbsp; justify-content: space-between; &nbsp; &nbsp; flex-direction: row; &nbsp; &nbsp; width: 100%; } .repcontrol_add::before { &nbsp; &nbsp; content: '&amp;'; &nbsp; &nbsp; visibility: visible; &nbsp; &nbsp; font-family: pictos ; &nbsp; &nbsp; background-color: #fff; &nbsp; &nbsp; border: 0.1rem solid #000; &nbsp; &nbsp; border-radius: 0.2rem; &nbsp; &nbsp; font-size: 1.6rem; &nbsp; &nbsp; padding: 0.3rem 0.5rem 0.3rem 0.5rem; &nbsp; &nbsp; color: #4a6486; } .repcontrol .repcontrol_edit:after { &nbsp; &nbsp; font-family: Arial ; &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; content: '☰'; &nbsp; &nbsp; visibility: visible; &nbsp; &nbsp; font-family: pictos; &nbsp; &nbsp; background-color: #fff; &nbsp; &nbsp; border: 0.1rem solid #000; &nbsp; &nbsp; border-radius: 0.2rem; &nbsp; &nbsp; font-size: 1.6rem; &nbsp; &nbsp; padding: 0.3rem 0.3rem 0.2rem 0.3rem; &nbsp; &nbsp; color: #4a6486; } .editmode ~ .repcontrol .repcontrol_edit:after { &nbsp; &nbsp; font-family: Pictos; &nbsp; &nbsp; content: '3'; &nbsp; &nbsp; width:1.6rem; } .repcontrol_edit:hover:before, .repcontrol_edit:hover:after,&nbsp; .repcontrol_add:hover:before { &nbsp; &nbsp; color: red !important; &nbsp; &nbsp; box-shadow: 0.1rem 0.1rem 0.2rem #333; } .repcontrol .btn{ &nbsp; &nbsp; border: none; &nbsp; &nbsp; color: white; &nbsp; &nbsp; font-size: 0; &nbsp; &nbsp; padding: 0.3rem 0 0 0; &nbsp; &nbsp; margin-left: 3px; &nbsp; &nbsp; margin-right: 3px; &nbsp; &nbsp; background: none; &nbsp; &nbsp; box-shadow: none; } .repcontrol .btn:focus { &nbsp; outline: 0; } .repcontrol_add, .repcontrol_edit { &nbsp; &nbsp; display: block; &nbsp; &nbsp; background: none; &nbsp; &nbsp; color: transparent !important; &nbsp; &nbsp; border: none; &nbsp; &nbsp; box-shadow: none;&nbsp; &nbsp;&nbsp; } .repcontrol_del, .repcontrol_move { &nbsp; &nbsp; display: block; &nbsp; &nbsp; background: white; &nbsp; &nbsp; color: black; &nbsp; &nbsp; border: none; &nbsp; &nbsp; box-shadow: none; &nbsp; &nbsp; width: 2em; } .sheet-fs-small-label2 { &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; height: 3em; &nbsp; &nbsp; min-height: 3em; &nbsp; &nbsp; vertical-align: top; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; position: relative; } .sheet-fs-small-label2 span:not(.sheet-fs-autoexpand) { &nbsp; &nbsp; padding: 0 .07em 0 .07em; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; font-size: 1.2rem; &nbsp; &nbsp; font-style: italic; &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; color: Black; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; bottom: 0; &nbsp; &nbsp; overflow-x: visible; &nbsp; &nbsp; white-space: nowrap; } .sheet-fs-small-label2.sheet-fs-autoexpand span:not(.sheet-fs-autoexpand) { &nbsp; &nbsp; &nbsp; &nbsp; white-space:nowrap; } .sheet-fs-small-label2 &gt; input:not(.sheet-cssbutton), .sheet-fs-small-label2 &gt; select { &nbsp; &nbsp; display: block; &nbsp; &nbsp; padding: .25em 0rem .25em 0rem; /* 0rem on left and right to fix truncated inputs */ &nbsp; &nbsp; height: 1.825em; &nbsp; &nbsp; /* otherwise defaults from base.css hardcode it too tall */ &nbsp; &nbsp; position: relative; } .sheet-fs-small-label2 &gt; select { &nbsp; &nbsp; padding-top: 0; } .sheet-fs-small-label2 input::-moz-focus-inner { &nbsp; &nbsp; padding: 0; } /* webkit (chrome) needs different css firefox centers perfectly, not chrome.must make it equal to 1.825 */ .sheet-fs-small-label2 &gt; input[type="checkbox"]:not(.sheet-cssbutton), .sheet-fs-small-label2 &gt; input[type="radio"]:not(.sheet-cssbutton) { &nbsp; &nbsp; -webkit-logical-height: 1em; &nbsp; &nbsp; -webkit-margin-before: .5em; &nbsp; &nbsp; -webkit-margin-after: .325em; &nbsp; &nbsp; width: 100%; &nbsp; &nbsp; border: none; &nbsp; &nbsp; box-shadow: none; } .sheet-fs-nontable { &nbsp; &nbsp; width: 100%; &nbsp; &nbsp; text-align: justify; &nbsp; &nbsp; border-collapse: collapse; } .sheet-section-header .sheet-fs-small-label2 { &nbsp; &nbsp; display: table-cell; &nbsp; &nbsp; padding: 0 .25em 0 .25em; &nbsp; &nbsp; vertical-align: bottom; } .sheet-table-name, .sheet-fs-nontable-name { &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; color: White; &nbsp; &nbsp; background-color: Black; &nbsp; &nbsp; padding-top:.25em; } .sheet-fs-nontable-name { &nbsp; &nbsp; width: 100%; } .sheet-fs-nontable-name { &nbsp; &nbsp; display: block; } .sheet-fs-h2arrow:not(:checked) + .sheet-fs-showsect + .sheet-fs-h2-section, .sheet-fs-h2arrow:not(:checked) + .sheet-fs-showsect + .sheet-fs-h2-section + .sheet-fs-h2-section, .sheet-fs-h2arrow:not(:checked) + .sheet-fs-showsect + .sheet-fs-h2-section + .sheet-fs-h2-section + .sheet-fs-h2-section, .sheet-fs-h2arrow:not(:checked) + .sheet-fs-showsect + .sheet-fs-nontable-name, .sheet-fs-h2arrow:not(:checked) + .sheet-fs-showsect + .sheet-fs-nontable-name + .sheet-fs-h2-section, .sheet-fs-h2arrow:not(:checked) + .sheet-fs-showsect + .sheet-fs-nontable-name + .sheet-fs-h2-section + .sheet-fs-h2-section, .sheet-fs-h2arrow:not(:checked) + .sheet-fs-showsect + .sheet-fs-nontable-name + .sheet-fs-h2-section + .sheet-fs-h2-section + .sheet-fs-h2-section, .sheet-fs-h2arrow:not(:checked) + .sheet-fs-showsect + .sheet-fs-nontable-name + .sheet-fs-h2-section + .sheet-fs-h2-section + .sheet-fs-h2-section + .sheet-fs-h2-section { &nbsp; &nbsp; display: none; } .sheet-fs-h2-section.sheet-fs-core-details { &nbsp; &nbsp; width: calc(100% - 4px); &nbsp; &nbsp; height:auto; &nbsp; &nbsp; display:block; &nbsp; &nbsp; clear:both; &nbsp; &nbsp; margin: 0.4rem 0.2rem 0.2rem 0.2rem; } .sheet-fs-small-label2.sheet-fs-autoexpand { &nbsp; &nbsp; padding-top: 2em; &nbsp; &nbsp; width: auto; &nbsp; &nbsp; min-width: 3.5em; &nbsp; &nbsp; max-width: 99%; &nbsp; &nbsp; max-height: 1em; &nbsp; &nbsp; margin-bottom: 10px; } .sheet-fs-small-label2.sheet-fs-autoexpand input { &nbsp; &nbsp; position:absolute; &nbsp; &nbsp; overflow:visible; &nbsp; &nbsp; top:.3em;&nbsp; &nbsp;&nbsp; } .sheet-fs-small-label2.sheet-fs-autoexpand span.sheet-fs-autoexpand { &nbsp; &nbsp; visibility:hidden; &nbsp; &nbsp; width:100%; &nbsp; &nbsp; white-space:pre-wrap; &nbsp; &nbsp; word-wrap:break-word; &nbsp; &nbsp; overflow-wrap:break-word; &nbsp; &nbsp; display:block; &nbsp; &nbsp; min-height:1.3rem; &nbsp; &nbsp; height:auto; } .sheet-fs-small-label2.sheet-fs-wide-textareaparent { &nbsp; &nbsp; display:block; &nbsp; &nbsp; clear:both; &nbsp; &nbsp; height:auto; &nbsp; &nbsp; margin-bottom:20px; } .sheet-fs-noshow { &nbsp; &nbsp; display:none; } .sheet-rolltemplate-fs-button { &nbsp; &nbsp; text-align: center; } .sheet-rolltemplate-fs-GoalRoll .sheet-fs-container, .sheet-rolltemplate-fs-InitRoll .sheet-fs-container, .sheet-rolltemplate-fs-d6Roll .sheet-fs-container { &nbsp; &nbsp; border: 1px solid; &nbsp; &nbsp; padding: 2px; &nbsp; &nbsp; width: 90%; &nbsp; &nbsp; background: #fff; } .sheet-rolltemplate-fs-GoalRoll .sheet-fs-container .sheet-fs-charactername, .sheet-rolltemplate-fs-InitRoll .sheet-fs-container .sheet-fs-charactername, .sheet-rolltemplate-fs-d6Roll .sheet-fs-container .sheet-fs-charactername { &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; font-size: 0.9em; &nbsp; &nbsp; line-height: 1em; &nbsp; &nbsp; border-bottom: 1px solid black; } .sheet-rolltemplate-fs-GoalRoll .sheet-fs-container h1, .sheet-rolltemplate-fs-InitRoll .sheet-fs-container h1, .sheet-rolltemplate-fs-d6Roll .sheet-fs-container h1 { &nbsp; &nbsp; color: #4a6486; &nbsp; &nbsp; font-size: 1.1em; &nbsp; &nbsp; font-variant: small-caps; &nbsp; &nbsp; line-height: 20px; } .sheet-rolltemplate-fs-GoalRoll .sheet-fs-arrow-right, .sheet-rolltemplate-fs-InitRoll .sheet-fs-arrow-right, .sheet-rolltemplate-fs-d6Roll .sheet-fs-arrow-right { &nbsp; &nbsp; border-bottom: 2px solid transparent; &nbsp; &nbsp; border-left: 200px solid #4a6486; &nbsp; &nbsp; border-top: 2px solid transparent; } .sheet-rolltemplate-fs-GoalRoll .inlinerollresult, .sheet-rolltemplate-fs-InitRoll .inlinerollresult, .sheet-rolltemplate-fs-d6Roll .inlinerollresult { &nbsp; &nbsp; background-color: transparent; &nbsp; &nbsp; border: none; &nbsp; &nbsp; font-weight: normal; } .sheet-rolltemplate-fs-GoalRoll .inlinerollresult.fullcrit, .sheet-rolltemplate-fs-InitRoll .inlinerollresult.fullcrit, .sheet-rolltemplate-fs-d6Roll .inlinerollresult.fullcrit, .sheet-rolltemplate-fs-GoalRoll .inlinerollresult.importantroll, .sheet-rolltemplate-fs-InitRoll .inlinerollresult.importantroll, .sheet-rolltemplate-fs-d6Roll .inlinerollresult.importantroll, .sheet-rolltemplate-fs-GoalRoll .inlinerollresult.fullfail, .sheet-rolltemplate-fs-InitRoll .inlinerollresult.fullfail, .sheet-rolltemplate-fs-GoalRoll .inlinerollresult.fullfail { &nbsp; &nbsp; border: none; } .sheet-rolltemplate-fs-InitRoll .inlinerollresult.fullcrit, .sheet-rolltemplate-fs-GoalRoll .sheet-fs-critsuccess { &nbsp; &nbsp; color: #3FB315; } .sheet-rolltemplate-fs-GoalRoll .sheet-fs-success { &nbsp; &nbsp; color: #205b0b; } .sheet-rolltemplate-fs-GoalRoll .sheet-fs-failure { &nbsp; &nbsp; color: #5b0b0b; } .sheet-rolltemplate-fs-InitRoll .inlinerollresult.fullfail, .sheet-rolltemplate-fs-GoalRoll .sheet-fs-critfailure { &nbsp; &nbsp; color: #B31515; } .sheet-fs-w100 { &nbsp; &nbsp; width: 100%; } .sheet-fs-h100 { &nbsp; &nbsp; height: 100%; } .sheet-fs-autoexpand &gt; input, .sheet-fs-autoexpand &gt; textarea { &nbsp; &nbsp; width: 100%; } .sheet-fs-row, .sheet-fs-col, .sheet-fs-skill-col { &nbsp; &nbsp; display: flex; &nbsp; &nbsp; flex-wrap: nowrap; &nbsp; &nbsp; align-content: flex-start; &nbsp; &nbsp; align-items: center; &nbsp; &nbsp; justify-content: flex-start; } .sheet-fs-row { &nbsp; &nbsp; flex-direction: row; &nbsp; &nbsp; align-self: stretch; } .sheet-fs-col { &nbsp; &nbsp; flex-direction: column; } .sheet-fs-skill-col { &nbsp; &nbsp; flex-direction: column; &nbsp; &nbsp; flex: 1 1 0; } .sheet-fs-grid-skills .sheet-fs-skill-col:not(:last-child) { &nbsp; &nbsp; margin-right: 5px; } .sheet-fs-skill-col .sheet-fs-skill-family:not(:first-child) { &nbsp; &nbsp; margin-top: 5px; } .sheet-fs-tall-textarea { &nbsp; &nbsp; min-height: 100px; &nbsp; &nbsp; height:100%; &nbsp; &nbsp; align-self: stretch; } .sheet-fs-supertall-textarea { &nbsp; &nbsp; min-height: 300px; &nbsp; &nbsp; height:100%; &nbsp; &nbsp; align-self: stretch; } .sheet-fs-description { &nbsp; &nbsp; align-self: stretch; } .sheet-fs-space-evenly { &nbsp; &nbsp; width: 100%; &nbsp; &nbsp; display: inline-flex; &nbsp; &nbsp; flex-wrap: wrap; &nbsp; &nbsp; justify-content: space-evenly; } .sheet-fs-small-label2 &gt; input { &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; overflow: visible; } .sheet-fs-grid-1x2-equal { &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-template-columns: 1fr 1fr; &nbsp; &nbsp; grid-template-rows: max-content; &nbsp; &nbsp; align-items: start; &nbsp; &nbsp; align-content: center; &nbsp; &nbsp; grid-gap: 5px; } .sheet-fs-grid-1x3 { &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-template-rows: max-content; &nbsp; &nbsp; grid-template-columns: max-content max-content max-content; &nbsp; &nbsp; align-items: center; &nbsp; &nbsp; align-content: center; } .sheet-fs-grid-1x6 { &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-template-rows: max-content; &nbsp; &nbsp; grid-template-columns: max-content max-content max-content max-content max-content max-content; &nbsp; &nbsp; align-items: center; &nbsp; &nbsp; align-content: center; } .sheet-fs-grid-3x3 { &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-template-rows: max-content max-content max-content; &nbsp; &nbsp; grid-template-columns: max-content max-content max-content; &nbsp; &nbsp; align-items: center; &nbsp; &nbsp; align-content: center; } .sheet-fs-grid-3x4 { &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-template-rows: max-content max-content max-content; &nbsp; &nbsp; grid-template-columns: max-content max-content max-content max-content; &nbsp; &nbsp; align-items: center; &nbsp; &nbsp; align-content: center; } .sheet-fs-grid-characteristics { &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-template: &nbsp; &nbsp; &nbsp; "body&nbsp; &nbsp; &nbsp; &nbsp; mind&nbsp; &nbsp; &nbsp; &nbsp; spirit&nbsp; &nbsp; &nbsp; spirit&nbsp; &nbsp; &nbsp; blessingscurses" max-content &nbsp; &nbsp; &nbsp; "wyrdvita&nbsp; &nbsp; wyrdvita&nbsp; &nbsp; wyrdvita&nbsp; &nbsp; init&nbsp; &nbsp; &nbsp; &nbsp; blessingscurses" 1fr &nbsp; &nbsp; &nbsp; "wyrdvita&nbsp; &nbsp; wyrdvita&nbsp; &nbsp; wyrdvita&nbsp; &nbsp; xp&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; blessingscurses" 1fr &nbsp; &nbsp; &nbsp;/ max-content max-content max-content max-content 1fr; &nbsp; &nbsp; grid-gap: 5px; &nbsp; &nbsp; align-items: start; &nbsp; &nbsp; align-content: start; &nbsp; &nbsp; justify-content: start; } .sheet-fs-grid-characteristics-body&nbsp; &nbsp; &nbsp;{ grid-area: body; } .sheet-fs-grid-characteristics-mind&nbsp; &nbsp; &nbsp;{ grid-area: mind; } .sheet-fs-grid-characteristics-spirit&nbsp; &nbsp;{ grid-area: spirit; } .sheet-fs-grid-characteristics-init&nbsp; &nbsp; &nbsp;{ grid-area: init; } .sheet-fs-grid-characteristics-xp&nbsp; &nbsp; &nbsp; &nbsp;{ grid-area: xp; } .sheet-fs-grid-characteristics-blessingscurses { grid-area: blessingscurses; } .sheet-fs-grid-characteristics-wyrdvita { grid-area: wyrdvita; } .sheet-fs-grid-skills { &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-auto-columns: 25%; &nbsp; &nbsp; grid-auto-flow: column; } input[type="number"] { &nbsp; &nbsp; min-width: 10px; } .sheet-fs-after-wyrd-vita { &nbsp; &nbsp; min-width: 13px; } .sheet-fs-characteristic input[type=number], .sheet-fs-skill input[type=number], .sheet-fs-grid-characteristics-wyrdvita input[type=number], .sheet-fs-energy-shield-max-hp input[type=number] { &nbsp; &nbsp; width: 25px; &nbsp; &nbsp; min-width: 25px; &nbsp; &nbsp; margin-left: 5px; } .sheet-fs-grid-characteristics-init label { &nbsp; &nbsp; margin-left: 3px; } .sheet-fs-table input[type=number] { &nbsp; &nbsp; width: 100%; } .sheet-fs-characteristic { &nbsp; &nbsp; display: inline-flex; &nbsp; &nbsp; flex-direction: row; &nbsp; &nbsp; flex-wrap: nowrap; &nbsp; &nbsp; align-content: flex-start; &nbsp; &nbsp; align-items: center; &nbsp; &nbsp; justify-content: flex-start; &nbsp; &nbsp; align-self: stretch; } .sheet-fs-skill { &nbsp; &nbsp; width:100%; &nbsp; &nbsp; display: inline-flex; &nbsp; &nbsp; flex-direction: row; &nbsp; &nbsp; flex-wrap: nowrap; &nbsp; &nbsp; align-content: flex-start; &nbsp; &nbsp; align-items: center; &nbsp; &nbsp; justify-content: flex-start; &nbsp; &nbsp; align-self: stretch; } .sheet-fs-characteristic .sheet-fs-characteristic-label, .sheet-fs-characteristic .sheet-fs-characteristic-label span, .sheet-fs-skill .sheet-fs-skill-label, .sheet-fs-skill .sheet-fs-skill-label span, .sheet-fs-skill .sheet-fs-skill-label input, .sheet-fs-skill .sheet-fs-skill-label button, input.sheet-fs-blessingcurse, input.sheet-fs-beneficeaffliction { &nbsp; &nbsp; white-space: nowrap; &nbsp; &nbsp; width: 100%; &nbsp; &nbsp; overflow-x: hidden; &nbsp; &nbsp; text-overflow: ellipsis; } .sheet-fs-skill + .sheet-fs-col { &nbsp; &nbsp; width: 100%; } .sheet-fadingsuns button[type=roll] { &nbsp; &nbsp; margin: 0 0 0 0; } .sheet-fs-characteristic-label, .sheet-fs-characteristic-label *, .sheet-fs-skill-label, .sheet-fs-skill-label * { &nbsp; &nbsp; font-weight: bold; } .sheet-fs-characteristic-label, .sheet-fs-skill-label { &nbsp; &nbsp; margin-left: 3px; } h2.sheet-fs-clickheader { &nbsp; &nbsp; font-size: 120%; } .sheet-fs-vitality-malus * { &nbsp; &nbsp; font-size: 80%; } .sheet-fs-table { &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-auto-rows: auto; &nbsp; &nbsp; min-width:100%; } .sheet-fs-table fieldset, .sheet-fs-table .repcontainer, .sheet-fs-table .repitem { &nbsp; &nbsp; display: contents; } .repcontainer { &nbsp; &nbsp; width: 100%; } .sheet-fs-table input { &nbsp; &nbsp; min-width: 10px; &nbsp; &nbsp; width: auto; } .sheet-fs-table .repcontrol { grid-column: 1 / -1 } .sheet-fs-weapons .sheet-fs-table { grid-template-columns: 30px 1.5fr 80px 120px 50px 28px 40px 60px 60px 40px 50px 40px 30px; } .sheet-fs-weapons .sheet-fs-table .sheet-fs-table-head:nth-child(6) { &nbsp; &nbsp; grid-column: span 2; } .sheet-fs-weapons .sheet-fs-table .sheet-fs-table-head:nth-child(5), .sheet-fs-weapons .sheet-fs-table .sheet-fs-table-head:nth-child(6), .sheet-fs-weapons .sheet-fs-table .sheet-fs-table-head:nth-child(7), .sheet-fs-weapons .sheet-fs-table .sheet-fs-table-head:nth-child(8), .sheet-fs-weapons .sheet-fs-table .sheet-fs-table-head:nth-child(9), .sheet-fs-weapons .sheet-fs-table .sheet-fs-table-head:nth-child(10), .sheet-fs-weapons .sheet-fs-table .sheet-fs-table-head:nth-child(11), .sheet-fs-weapons .sheet-fs-table .sheet-fs-table-head:nth-child(12) { &nbsp; &nbsp; text-align: center; } .sheet-fs-weapons .sheet-fs-table input:nth-child(8) { &nbsp; &nbsp; font-weight: bold; } .sheet-fs-weapons .sheet-fs-table input:nth-child(11), .sheet-fs-weapons .sheet-fs-table input:nth-child(13), .sheet-fs-weapons .sheet-fs-table input:nth-child(14), .sheet-fs-weapons .sheet-fs-table input:nth-child(15), .sheet-fs-weapons .sheet-fs-table input:nth-child(16), .sheet-fs-weapons .sheet-fs-table input:nth-child(17), .sheet-fs-weapons .sheet-fs-table input:nth-child(18), .sheet-fs-weapons .sheet-fs-table input:nth-child(19) { &nbsp; &nbsp; text-align: center; } .sheet-fs-weapons fieldset, /* make preview similar */ .sheet-fs-weapons .repcontrol { &nbsp; &nbsp; margin-bottom:5px; } .sheet-fs-armors .sheet-fs-table { grid-template-columns: 1.5fr 28px 32px 60px 60px 60px 60px 25px; } .sheet-fs-armors .sheet-fs-table .sheet-fs-table-head:nth-child(2) { &nbsp; &nbsp; grid-column: span 2; } .sheet-fs-armors .sheet-fs-table .sheet-fs-table-head:nth-child(2), .sheet-fs-armors .sheet-fs-table .sheet-fs-table-head:nth-child(3), .sheet-fs-armors .sheet-fs-table .sheet-fs-table-head:nth-child(4), .sheet-fs-armors .sheet-fs-table .sheet-fs-table-head:nth-child(5), .sheet-fs-armors .sheet-fs-table .sheet-fs-table-head:nth-child(6), .sheet-fs-armors .sheet-fs-table .sheet-fs-table-head:nth-child(7), .sheet-fs-armors .sheet-fs-table input:nth-child(3), .sheet-fs-armors .sheet-fs-table input:nth-child(4), .sheet-fs-armors .sheet-fs-table input:nth-child(5), .sheet-fs-armors .sheet-fs-table input:nth-child(6), .sheet-fs-armors .sheet-fs-table input:nth-child(7), .sheet-fs-armors .sheet-fs-table input:nth-child(8) { &nbsp; &nbsp; text-align: center; } .sheet-fs-armors .sheet-fs-table input:nth-child(1) { &nbsp; &nbsp; font-weight: bold; } .sheet-fs-armors fieldset, /* make preview similar */ .sheet-fs-armors .repcontrol { &nbsp; &nbsp; margin-bottom:5px; } .sheet-fs-combatstyles .sheet-fs-table { grid-template-columns: 1fr 25px 1fr 2.5fr; } .sheet-fs-combatstyles .sheet-fs-table .sheet-fs-table-head:nth-child(2), .sheet-fs-combatstyles .sheet-fs-table input:nth-child(2) { &nbsp; &nbsp; text-align: center; } .sheet-fs-combatstyles .sheet-fs-table input:nth-child(3) { &nbsp; &nbsp; font-weight: bold; } .sheet-fs-psipowers .sheet-fs-table { grid-template-columns: 30px 0.5fr 25px 1fr 80px 120px 80px 80px 50px; } .sheet-fs-psipowers .sheet-fs-table .sheet-fs-table-head:nth-child(3), .sheet-fs-psipowers .sheet-fs-table .sheet-fs-table-head:nth-child(7), .sheet-fs-psipowers .sheet-fs-table .sheet-fs-table-head:nth-child(8), .sheet-fs-psipowers .sheet-fs-table .sheet-fs-table-head:nth-child(9), .sheet-fs-psipowers .sheet-fs-table input:nth-child(9), .sheet-fs-psipowers .sheet-fs-table input:nth-child(13), .sheet-fs-psipowers .sheet-fs-table input:nth-child(14), .sheet-fs-psipowers .sheet-fs-table input:nth-child(15) { &nbsp; &nbsp; text-align: center; } .sheet-fs-psipowers .sheet-fs-table input:nth-child(10) { &nbsp; &nbsp; font-weight: bold; } .sheet-fs-theurgyrites .sheet-fs-table { grid-template-columns: 30px 0.5fr 25px 1fr 80px 120px 60px 80px 80px 50px; } .sheet-fs-theurgyrites .sheet-fs-table .sheet-fs-table-head:nth-child(3), .sheet-fs-theurgyrites .sheet-fs-table .sheet-fs-table-head:nth-child(7), .sheet-fs-theurgyrites .sheet-fs-table .sheet-fs-table-head:nth-child(8), .sheet-fs-theurgyrites .sheet-fs-table .sheet-fs-table-head:nth-child(9), .sheet-fs-theurgyrites .sheet-fs-table .sheet-fs-table-head:nth-child(10), .sheet-fs-theurgyrites .sheet-fs-table input:nth-child(9), .sheet-fs-theurgyrites .sheet-fs-table input:nth-child(13), .sheet-fs-theurgyrites .sheet-fs-table input:nth-child(14), .sheet-fs-theurgyrites .sheet-fs-table input:nth-child(15), .sheet-fs-theurgyrites .sheet-fs-table input:nth-child(16) { &nbsp; &nbsp; text-align: center; } .sheet-fs-theurgyrites .sheet-fs-table input:nth-child(10) { &nbsp; &nbsp; font-weight: bold; } .sheet-fs-bodymodifications .sheet-fs-table { grid-template-columns: 1fr 30px 100px; } .sheet-fs-bodymodifications .sheet-fs-table .sheet-fs-table-head:nth-child(2), .sheet-fs-bodymodifications .sheet-fs-table .sheet-fs-table-head:nth-child(3), .sheet-fs-bodymodifications .sheet-fs-table input:nth-child(2), .sheet-fs-bodymodifications .sheet-fs-table input:nth-child(3) { &nbsp; &nbsp; text-align: center; } .sheet-fs-bodymodifications .sheet-fs-table input:nth-child(1) { &nbsp; &nbsp; font-weight: bold; } .sheet-fs-carried .sheet-fs-table { grid-template-columns: 100%; } .sheet-fs-owned .sheet-fs-table { grid-template-columns: 2fr 1fr ; } .sheet-fs-spentxp .sheet-fs-table { grid-template-columns: 2fr 60px 60px 60px 3fr; } .sheet-fs-spentxp .sheet-fs-table input:nth-child(n+2):nth-child(-n+4) { &nbsp; &nbsp; text-align: center; } .sheet-fs-table-head { &nbsp; &nbsp; background-color: #4a6486; &nbsp; &nbsp; color: white; &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; white-space: nowrap; &nbsp; &nbsp; padding-left: 1px; &nbsp; &nbsp; padding-right: 1px; } .sheet-fs-table-cell { &nbsp; &nbsp; grid-column: auto / span 1; } .sheet-fs-table .itemcontrol { &nbsp; &nbsp; height: auto !important; /* TODO try without this to see if something bad happens */ } .sheet-fs-shield-props { &nbsp; &nbsp; justify-content: center; &nbsp; &nbsp; align-items: center; } .sheet-fs-shield-impact { &nbsp; &nbsp; margin-left: 10px; } .sheet-fs-shield-force { &nbsp; &nbsp; margin-right: 10px; } .sheet-fs-autoexpand input[type="number"] { &nbsp; &nbsp; width: 100%; } button[type="roll"].sheet-fs-hidden { &nbsp; &nbsp; display: none; } div.sheet-fs-dots { &nbsp; &nbsp; display: flex; &nbsp; &nbsp; flex-direction: row; &nbsp; &nbsp; margin-left: 3px; } div.sheet-fs-dots .sheet-fs-dot:nth-child(5n+2) { &nbsp; &nbsp; margin-left: 5px; } button.sheet-fs-dot { &nbsp; &nbsp; padding: 0; &nbsp; &nbsp; border: solid 1px #a8a8a8; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; width: 12px; &nbsp; &nbsp; height: 12px; &nbsp; &nbsp; display: flex; &nbsp; &nbsp; justify-content: center; &nbsp; &nbsp; align-items: center; &nbsp; &nbsp; margin-right: 2px; } button.sheet-fs-dot:hover, button.sheet-fs-dot &gt; span:hover { &nbsp; &nbsp; filter: sepia(100%) saturate(100%); } button[type=roll] { &nbsp; &nbsp; background: #fff; } button[type=roll]:hover:before { &nbsp; &nbsp; color: #888800; } &nbsp;&nbsp; button.sheet-fs-dot &gt; span { &nbsp; &nbsp; width: 8px; &nbsp; &nbsp; height: 8px; &nbsp; &nbsp; background: buttontext; &nbsp; &nbsp; background-color: #4a6486; } &nbsp;&nbsp; /* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */ input.sheet-fs-dot[value="0"] ~ button.sheet-fs-gt-0 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="1"] ~ button.sheet-fs-gt-1 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="2"] ~ button.sheet-fs-gt-2 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="3"] ~ button.sheet-fs-gt-3 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="4"] ~ button.sheet-fs-gt-4 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="5"] ~ button.sheet-fs-gt-5 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="6"] ~ button.sheet-fs-gt-6 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="7"] ~ button.sheet-fs-gt-7 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="8"] ~ button.sheet-fs-gt-8 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="9"] ~ button.sheet-fs-gt-9 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="10"] ~ button.sheet-fs-gt-10 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="11"] ~ button.sheet-fs-gt-11 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="12"] ~ button.sheet-fs-gt-12 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="13"] ~ button.sheet-fs-gt-13 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="14"] ~ button.sheet-fs-gt-14 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="15"] ~ button.sheet-fs-gt-15 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="16"] ~ button.sheet-fs-gt-16 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="17"] ~ button.sheet-fs-gt-17 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="18"] ~ button.sheet-fs-gt-18 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="19"] ~ button.sheet-fs-gt-19 &gt; span.sheet-fs-checked, input.sheet-fs-dot[value="20"] ~ button.sheet-fs-gt-20 &gt; span.sheet-fs-checked { &nbsp; &nbsp; display: none; } .sheet-fs-skill &gt; div.sheet-fs-skill-normal { &nbsp; &nbsp; width: calc(100% - 30px); &nbsp; &nbsp; display: inline-flex; &nbsp; &nbsp; flex-direction: row; &nbsp; &nbsp; flex-wrap: nowrap; &nbsp; &nbsp; align-content: flex-start; &nbsp; &nbsp; align-items: center; &nbsp; &nbsp; justify-content: flex-start; &nbsp; &nbsp; align-self: stretch; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; overflow: visible; } .sheet-fs-skill &gt; div.sheet-fs-skill-normal &gt; button.sheet-fs-d20 + div.sheet-fs-skill-roll-characteristic-choice { &nbsp; &nbsp; display: none; } .sheet-fs-skill &gt; div.sheet-fs-skill-normal &gt; button.sheet-fs-d20:hover + div.sheet-fs-skill-roll-characteristic-choice, .sheet-fs-skill &gt; div.sheet-fs-skill-normal &gt; button.sheet-fs-d20 + div.sheet-fs-skill-roll-characteristic-choice:hover { &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; z-index: 5; &nbsp; &nbsp; top: 1px; &nbsp; &nbsp; left: 26px; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; background-color: #ffffff; &nbsp; &nbsp; border-radius: 5px; &nbsp; &nbsp; border: 1px solid rgb(15, 9, 9); &nbsp; &nbsp; padding: 2px; &nbsp; &nbsp; width: max-content; &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-auto-flow: row; &nbsp; &nbsp; grid-template-rows: max-content; } .sheet-fs-skill &gt; div.sheet-fs-skill-normal &gt; button.sheet-fs-d20:hover + div.sheet-fs-skill-roll-characteristic-choice &gt; input, .sheet-fs-skill &gt; div.sheet-fs-skill-normal &gt; button.sheet-fs-d20 + div.sheet-fs-skill-roll-characteristic-choice:hover &gt; input { &nbsp; &nbsp; height: 25px; } .sheet-fs-skill &gt; div.sheet-fs-skill-normal &gt; button.sheet-fs-d20:hover + div.sheet-fs-skill-roll-characteristic-choice &gt; div, .sheet-fs-skill &gt; div.sheet-fs-skill-normal &gt; button.sheet-fs-d20 + div.sheet-fs-skill-roll-characteristic-choice:hover &gt; div { &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-auto-flow: column; &nbsp; &nbsp; grid-template-rows: repeat(9, max-content); } .sheet-fs-skill &gt; div.sheet-fs-skill-normal &gt; button.sheet-fs-d20:hover + div.sheet-fs-skill-roll-characteristic-choice &gt; div &gt; div:nth-child(3), .sheet-fs-skill &gt; div.sheet-fs-skill-normal &gt; button.sheet-fs-d20 + div.sheet-fs-skill-roll-characteristic-choice:hover &gt; div &gt; div:nth-child(3), .sheet-fs-skill &gt; div.sheet-fs-skill-normal &gt; button.sheet-fs-d20:hover + div.sheet-fs-skill-roll-characteristic-choice &gt; div &gt; div:nth-child(12), .sheet-fs-skill &gt; div.sheet-fs-skill-normal &gt; button.sheet-fs-d20 + div.sheet-fs-skill-roll-characteristic-choice:hover &gt; div &gt; div:nth-child(12), .sheet-fs-skill &gt; div.sheet-fs-skill-normal &gt; button.sheet-fs-d20:hover + div.sheet-fs-skill-roll-characteristic-choice &gt; div &gt; div:nth-child(21), .sheet-fs-skill &gt; div.sheet-fs-skill-normal &gt; button.sheet-fs-d20 + div.sheet-fs-skill-roll-characteristic-choice:hover &gt; div &gt; div:nth-child(21) { &nbsp; &nbsp; padding-top: 2px; &nbsp; &nbsp; border-top: 1px solid black; &nbsp; &nbsp; margin-top: 2px; } div.sheet-fs-skill-roll-characteristic-choice &gt; div &gt; div &gt; label { &nbsp; &nbsp; margin-left: 3px; } .sheet-fs-notes { &nbsp; &nbsp; grid-column: 1 / -1; &nbsp; &nbsp; margin-left: 15px; &nbsp; &nbsp; width:calc(100%-15px); &nbsp; &nbsp; max-height: 0px; &nbsp; &nbsp; position: relative; } .sheet-fs-notes:focus, .sheet-fs-notes:focus-within, .sheet-fs-notes:active, .sheet-fs-table input:active ~ .sheet-fs-notes, .sheet-fs-table input:focus ~ .sheet-fs-notes, .sheet-fs-table input:focus-within ~ .sheet-fs-notes { &nbsp; &nbsp; min-height: 4em; &nbsp; &nbsp; max-height: initial; &nbsp; &nbsp; resize: vertical; &nbsp; &nbsp; overflow:auto; &nbsp; &nbsp; align-self: stretch; } .sheet-fs-auto-expand-textarea { cursor: text; &nbsp; &nbsp; word-wrap: break-word; } .sheet-fs-notes &gt; .sheet-fs-auto-expand-textarea { &nbsp; &nbsp; visibility: collapse; } /* hack for Firefox due to focus events on invisible elements not been registered it seems. */ /* We need to keep it visible for &gt;0ms for the click to be registered. */ .sheet-fs-notes &gt; .sheet-fs-auto-expand-textarea { &nbsp; &nbsp; transition: visibility 0s linear 1ms; } .sheet-fs-notes:focus &gt; .sheet-fs-auto-expand-textarea, .sheet-fs-notes:focus-within &gt; .sheet-fs-auto-expand-textarea, .sheet-fs-notes:active &gt; .sheet-fs-auto-expand-textarea, .sheet-fs-table input:active ~ .sheet-fs-notes &gt; .sheet-fs-auto-expand-textarea, .sheet-fs-table input:focus ~ .sheet-fs-notes &gt; .sheet-fs-auto-expand-textarea, .sheet-fs-table input:focus-within ~ .sheet-fs-notes &gt; .sheet-fs-auto-expand-textarea, .sheet-fs-table select:active ~ .sheet-fs-notes &gt; .sheet-fs-auto-expand-textarea, .sheet-fs-table select:focus ~ .sheet-fs-notes &gt; .sheet-fs-auto-expand-textarea, .sheet-fs-table select:focus-within ~ .sheet-fs-notes &gt; .sheet-fs-auto-expand-textarea { &nbsp; &nbsp; visibility: visible; } .sheet-fs-auto-expand-textarea span { visibility: hidden; white-space: pre-wrap; display: block; } .sheet-fs-auto-expand-textarea textarea { position: absolute; z-index: 1; top: 0; left: 0; margin: 0; overflow: hidden; height: 100%; width: 100%; display: block; box-sizing: border-box; background: transparent; border: none; border-radius: 0; box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit; padding: inherit; text-align: inherit; text-transform: inherit; } &nbsp;&nbsp; This is the CSS I've not changed this from the original posted on GitHub&nbsp;

In preview window, as with the original template the text is black/dark grey. In vtt now with my modified sheet, the text shows in brackets in red . Thanks James

Okay I've fixed it, silly me I hadn't added the translation.json&nbsp; Thanks to the original template maker Admiralnlson for his work.&nbsp;