roll20-character-sheets-tester/Fallout 2d20/sheet.css

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

body .charactersheet * {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
}


/* PIP-BOY R20 */
.charactersheet .style-pip-boy[value="1"] ~ .interface {
    background: black;
}
.charactersheet .style-pip-boy[value="1"] ~ .interface * {
    color: #1AF87F;
}
.charactersheet .style-pip-boy[value="1"] ~ .interface .locations {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/fallout-2d20-dev/Fallout%202d20/images/vaultboy-pb.png') center no-repeat;
    background-size: contain;
}
.charactersheet .style-vault-girl[value="1"] ~ .interface .locations {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/fallout-2d20-dev/Fallout%202d20/images/vaultgirl.png') center no-repeat;
    background-size: contain;
}
.charactersheet .style-vault-girl[value="1"] ~ .style-pip-boy[value="1"] ~ .interface .locations {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/fallout-2d20-dev/Fallout%202d20/images/vaultgirl-pb.png') center no-repeat;
    background-size: contain;
}


.charactersheet h1, h2, h3, h4, p {
    clear: both;
    min-height: 20px;
    line-height: 18px;
    margin: 0;
    padding: 0;
}
.charactersheet h1 {
    font: bold 20px 'Roboto', sans-serif;
	width: 50%;
    padding: 5px 5px 5px 35px;
    margin: 0px 0px 5px -30px;
    box-sizing: border-box;
    background: linear-gradient(135deg, #e0b829 90%, white 90%);
    color: white;
    text-transform: uppercase;
}
.charactersheet h2 {
    font: bold 10px 'Roboto', sans-serif;
	width: 200px;
    padding: 5px;
    margin: 0px 0px 5px 0px;
    box-sizing: border-box;
    background: linear-gradient(45deg, #e0b829 85%, white 85%);
    color: white;
    text-transform: uppercase;
}
.combat h2 {
    background: linear-gradient(45deg, #DC8D3B 85%, white 85%);
}
.charactersheet .creation h2 {
    font: bold 20px 'Roboto', sans-serif;
    width: 100%;
    background: none;
    color: black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
.charactersheet h3 {
    font: bold 10px 'Roboto', sans-serif;
    padding: 5px 0px;
    margin: 0px;
    box-sizing: border-box;
    color: #e0b829;
    text-transform: uppercase;
}
.charactersheet p + p {
    padding-top: 10px;
}

/* tabs */
.tabs,
.subtabs {
    margin: 0px 0px 10px 0px;
    padding: 0px;
}
.tabs {
    border-bottom: solid 2px black;
}
.tabs div,
.subtabs div {
    display: inline-block;
    height: 25px;
    box-sizing: border-box;
    margin: 0px 0px -4px 10px;
    padding: 5px;
}
.tabs button,
.subtabs button {
    font: 10px 'Roboto', sans-serif;
    background: white;
    padding: 0px 5px;
    border: none;
    text-transform: uppercase;
}
.tabs button {
    font-weight: bold;
    color: black;
}
.subtabs button {
    font-weight: normal;
    color: #e0b829;
}
.tabs button:hover,
.subtabs button:hover {
    color: #e0b829;
}
.tabs .tabstoggle[value="creation"] ~ div.tab-creation,
.tabs .tabstoggle[value="character"] ~ div.tab-character,
.tabs .tabstoggle[value="perks"] ~ div.tab-perks,
.tabs .tabstoggle[value="items"] ~ div.tab-items,
.tabs .tabstoggle[value="settings"] ~ div.tab-settings {
    background: white;
    border-top: solid 2px black;
    border-left: solid 2px black;
    border-right: solid 2px black;
}
.subtabs .subtabstoggle[value="origin"] ~ div.tab-origin button,
.subtabs .subtabstoggle[value="attributes"] ~ div.tab-attributes button,
.subtabs .subtabstoggle[value="skills"] ~ div.tab-skills button,
.subtabs .subtabstoggle[value="perk"] ~ div.tab-perk button,
.subtabs .subtabstoggle[value="derived"] ~ div.tab-derived button,
.subtabs .subtabstoggle[value="equipment"] ~ div.tab-equipment button {
    font-weight: bold;
    color: black;
}
body .charactersheet .creation,
body .charactersheet .character,
body .charactersheet .perks,
body .charactersheet .items,
body .charactersheet .settings,
body .charactersheet .origin,
body .charactersheet .attributes,
body .charactersheet .skills,
body .charactersheet .perk,
body .charactersheet .derived,
body .charactersheet .equipment {
    display: none;
}
.tabstoggle[value="creation"] ~ div.creation,
.tabstoggle[value="character"] ~ div.character,
.tabstoggle[value="perks"] ~ div.perks,
.tabstoggle[value="items"] ~ div.items,
.tabstoggle[value="settings"] ~ div.settings {
    display: grid;
    row-gap: 20px;
}
.subtabstoggle[value="origin"] ~ div.origin,
.subtabstoggle[value="attributes"] ~ div.attributes,
.subtabstoggle[value="skills"] ~ div.skills,
.subtabstoggle[value="perk"] ~ div.perk,
.subtabstoggle[value="derived"] ~ div.derived,
.subtabstoggle[value="equipment"] ~ div.equipment {
    display: grid;
}

.attribute-value ~ button,
.attribute-value ~ span {
    color: white;
    border: none;
    height: 20px;
    margin-left: 5px;
    padding: 0px 10px;
    box-sizing: border-box;
}
.attribute-value ~ span {
    padding: 0px;
    margin: 0px;
    color: black;
}
.attribute-value ~ button:hover {
    color: black;
}
.attribute-value ~ span.total {
    float: right;
    width: 20px;
    height: 20px;
    text-height: 20px;
    padding: 0px 5px;
    border: solid 1px black;
    border-radius: 2px;
    background: black;
    color: white;
    text-align: center;
    font-weight: bold;
}
.strength .input,
.perception .input,
.endurance .input,
.charisma .input,
.intelligence .input,
.agility .input,
.luck .input {
    padding: 0px;
    border: none;
    color: black;
}

body .charactersheet .luckpts {
    background: linear-gradient(45deg, #fff0 20%, #BDBBD1 20%);
    grid-template-columns: 14fr 8fr;
    grid-column: 5;
    margin-top: -20px;
}
body .charactersheet div .col5 .luckpts label {
    background: none;
    box-shadow: none;
    text-align: right;
}
body .charactersheet div .col5 .luckpts input[type=number] {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/fallout-2d20-dev/Fallout%202d20/images/gear.png') center no-repeat;
    background-size: contain;
    height: auto;
    margin: -18px 0px;
    box-shadow: none;
    border: none;
    text-align: center;
}

body .charactersheet div .col7 label,
.col7 .input {
    background: #e0b829;
    color: white;
    border: none;
    font-weight: bold;
}

.col7 .input {
    font-size: 20px;
    height: auto;
}

.charactersheet .attributes .strength button,
.charactersheet .attributes .strength .input,
body .charactersheet div .col7 .strength label,
.col7 .strength .input {
    background: #EFBC91;
    box-shadow: 0 0 0 1px #EFBC91;
}

.charactersheet .attributes .perception button,
.charactersheet .attributes .perception .input,
body .charactersheet div .col7 .perception label,
.col7 .perception .input {
    background: #C0D5AE;
    box-shadow: 0 0 0 1px #C0D5AE;
}

.charactersheet .attributes .endurance button,
.charactersheet .attributes .endurance .input,
body .charactersheet div .col7 .endurance label,
.col7 .endurance .input {
    background: #ADC7D8;
    box-shadow: 0 0 0 1px #ADC7D8;
}

.charactersheet .attributes .charisma button,
.charactersheet .attributes .charisma .input,
body .charactersheet div .col7 .charisma label,
.col7 .charisma .input {
    background: #A2C1A2;
    box-shadow: 0 0 0 1px #A2C1A2;
}

.charactersheet .attributes .intelligence button,
.charactersheet .attributes .intelligence .input,
body .charactersheet div .col7 .intelligence label,
.col7 .intelligence .input {
    background: #CAC5A8;
    box-shadow: 0 0 0 1px #CAC5A8;
}

.charactersheet .attributes .agility button,
.charactersheet .attributes .agility .input,
body .charactersheet div .col7 .agility label,
.col7 .agility .input {
    background: #F3BAAF;
    box-shadow: 0 0 0 1px #F3BAAF;
}

.charactersheet .attributes .luck button,
.charactersheet .attributes .luck .input,
body .charactersheet div .col7 .luck label,
.col7 .luck .input {
    background: #BDBBD1;
    box-shadow: 0 0 0 1px #BDBBD1;
}

.charisma .origin-choice[value="mutant"] ~ button.value-7,
.charisma .origin-choice[value="mutant"] ~ button.value-8,
.charisma .origin-choice[value="mutant"] ~ button.value-9,
.charisma .origin-choice[value="mutant"] ~ button.value-10,
.intelligence .origin-choice[value="mutant"] ~ button.value-7,
.intelligence .origin-choice[value="mutant"] ~ button.value-8,
.intelligence .origin-choice[value="mutant"] ~ button.value-9,
.intelligence .origin-choice[value="mutant"] ~ button.value-10 {
    display: none;
}

.attribute-value[value="4"] ~ button.value-4,
.attribute-value[value="5"] ~ button.value-5,
.attribute-value[value="6"] ~ button.value-6,
.attribute-value[value="7"] ~ button.value-7,
.attribute-value[value="8"] ~ button.value-8,
.attribute-value[value="9"] ~ button.value-9,
.attribute-value[value="10"] ~ button.value-10 {
    background: white;
    color: black;
    border-radius: 2px;
}

.confirm-button button,
.confirm-button em {
    grid-column: 5;
}
.confirm-button xbutton {
    font-weight: bold;
    background: #e0b829;
    color: white;
    border: solid 1px #e0b829;
    border-radius: 2px;
}
.confirm-button button:hover {
    background: white;
    color: #e0b829;
}
.confirm-button em {
    display: block;
    width: auto;
    padding: 5px;
    border: dotted 1px #e0b829;
}

.special {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/fallout-2d20-dev/Fallout%202d20/images/special_bar.png') top center no-repeat;
    background-size: 100% 100%;
    grid-template-rows: 80px;
}
.charactersheet .special .grid {
    grid-template-rows: auto;
    align-self: center;
}
.special .header {
    font: bold 10px 'Roboto', sans-serif;
	display: inline-block;
	width: 100%;
    padding: 0px 0px 5px 0px;
    margin: 0px;
    box-sizing: border-box;
    color: white;
    text-align: center;
    text-transform: uppercase;
}
.special .value {
    font: bold 20px 'Roboto', sans-serif;
	display: inline-block;
	width: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    color: white;
    text-align: center;
    text-transform: uppercase;
}

.level {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/fallout-2d20-dev/Fallout%202d20/images/gear.png') top center no-repeat;
    background-size: contain;
    grid-template-rows: 25px auto;
}
.level .header {
    font: bold 10px 'Roboto', sans-serif;
	display: inline-block;
	width: 100%;
    padding: 15px 0px 0px 0px;
    margin: 0px;
    box-sizing: border-box;
    color: black;
    text-align: center;
    text-transform: uppercase;
}
.level .value {
    font: bold 20px 'Roboto', sans-serif;
	display: inline-block;
	width: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    color: black;
    text-align: center;
    text-transform: uppercase;
}


body .charactersheet .die {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/fallout-2d20-dev/Fallout%202d20/images/die_vaultboy.png') center no-repeat;
    background-size: contain;
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 0px;
    margin: 0px 0px -7px 0px;
}

.melee-damage ~ .die0,
.melee-damage ~ .die1,
.melee-damage ~ .die2,
.melee-damage ~ .die3 {
    display: none;
}

.melee-damage[value="0"] ~ .die0 {
    display: inline-block;
}
body .charactersheet div .col2 .melee-damage[value="1"] ~ .die1,
body .charactersheet div .col2 .melee-damage[value="2"] ~ .die2,
body .charactersheet div .col2 .melee-damage[value="3"] ~ .die3 {
    display: inline-block;
}


.logo {
    grid-template-rows: auto 20px;
}

.charactersheet .logo h1 {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/fallout-2d20-dev/Fallout%202d20/images/logo.png') left top no-repeat;
    background-size: contain;
    display: block;
    width: 100%;
    padding: 0px;
    margin: 0px;
    text-indent: -9999px;
}

.charactersheet .logo .doc-subtitle {
    font: bold 10px 'Roboto', sans-serif;
    padding: 5px;
    margin: 0px;
    box-sizing: border-box;
    color: black;
    text-transform: uppercase;
}

.charactersheet .grid {
    display: grid;
    margin: 0px;
    padding: 0px;
    grid-auto-rows: minmax(min-content, max-content);
    row-gap: 10px;
}
.charactersheet .gap {
    column-gap: 10px;
}
.charactersheet .nogap {
    gap: 1px;
    grid-template-rows: 20px auto;
}
.col2 {
    grid-template-columns: repeat(2, 1fr);
}
.col2-csheet {
    grid-template-columns: 1fr 2fr;
}
.col3 {
    grid-template-columns: repeat(3, 1fr);
}
.col4-health {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.col4 {
    grid-template-columns: repeat(4, 1fr);
}
.col4-csheet {
    grid-template-columns: 5fr 12fr 12fr 4fr;
}
.col5 {
    grid-template-columns: repeat(5, 1fr);
}
.col6 {
    grid-template-columns: repeat(6, 1fr);
}
.charactersheet .col7 {
    grid-template-columns: repeat(7, 1fr);
}
.col8 {
    grid-template-columns: repeat(8, 1fr);
}

.col4 .header {
    grid-column: span 4;
    text-align: center;
    box-shadow: none;
}
.col8 .header {
    grid-column: span 8;
    text-align: center;
    box-shadow: none;
}
.slot1 {
    grid-column: 1;
}
.slot2 {
    grid-column: 2;
}
.slot3 {
    grid-column: 3;
}
.slot4 {
    grid-column: 4;
}

.charactersheet label,
.label {
    font: bold 10px 'Roboto', sans-serif;
	display: inline-block;
	width: 100%;
    height: 20px;
    line-height: 20px;
    box-shadow: 0 0 0 1px black;
    padding: 0px 5px;
    margin: 0px;
    box-sizing: border-box;
    background: black;
    color: white;
    text-align: left;
    vertical-align: middle;
    text-transform: uppercase;
}

.charactersheet .creation label {
    background: #F4E1AE;
    color: black;
    box-shadow: 0 0 0 1px #F4E1AE;
}

.charactersheet label button {
    background: none;
    border: none;
    height: 20px
}

.col7 div label,
.col7 div input,
.col7 div .input,
.charactersheet label.level,
.charactersheet input.level {
    text-align: center;
}

body .charactersheet div .grid input,
.charactersheet select,
.input  {
    font: 10px 'Roboto', sans-serif;
	display: inline-block;
	width: 100%;
    height: 20px;
    border: 1px solid white;
    border-radius: 0px;
    box-shadow: 0 0 0 1px black;
    padding: 0px 5px;
    margin: 0px;
    box-sizing: border-box;
    background: white;
    color: black;
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
    outline: none;
}
.charactersheet .creation input,
.charactersheet .creation select {
    box-shadow: 0 0 0 1px #F4E1AE;
}
.input {
    box-shadow: 0 0 0 1px white;
}
.charactersheet select {
    font-size: 8px;
}

body .charactersheet div .grid input[type=checkbox]  {
    height: auto;
    width: auto;
    align-self: center;
}

body .charactersheet div .col2 input[type=checkbox]  {
    background: none;
    box-shadow: none;
    margin: 0px 5px;
}

body .charactersheet div .switch {
    background: none;
    border: none;
    box-shadow: 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: gray;
    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: green;
}
input:focus + .slider {
    box-shadow: 0 0 1px black;
}
input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

.charactersheet input[type=radio]  {
    height: auto;
    width: auto;
    margin: 0px 5px 5px 0px;
}

body .charactersheet div .grid input[type=number]  {
    width: 100%;
    height: 20px;
}

body .charactersheet div .grid input.character-name,
body .charactersheet div .grid input.level {
    height: auto;
    font-size: 20px;
}

.skills-grid,
.skills-grid-mini {
    display: grid;
    grid-template-rows: 20px;
    align-content: start;
}
.skills-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
}
.skills-grid-mini {
    grid-template-columns: 2fr 1fr 1fr;
}
.skills-grid div,
.skills-grid-mini div {
    font: normal 8px 'Roboto', sans-serif;
    height: 20px;
    line-height: 20px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0px 0px 0px 5px;
    background: #faeade;
    color: #de9458;
    text-align: center;
    align-self: center;
}
.skills-grid div.header,
.skills-grid-mini div.header {
    font: bold 10px 'Roboto', sans-serif;
    padding: 5px;
    background: black;
    color: white;
    text-transform: uppercase;
    text-align: center;
}
.skills-grid > div:nth-child(8n + 5),
.skills-grid > div:nth-child(8n + 6),
.skills-grid > div:nth-child(8n + 7),
.skills-grid > div:nth-child(8n + 8),
.skills-grid-mini > div:nth-child(6n + 4),
.skills-grid-mini > div:nth-child(6n + 5),
.skills-grid-mini > div:nth-child(6n + 6) {
    background: #f4d6bc;
}
.skills-grid div:nth-child(4n + 1),
.skills-grid-mini div:nth-child(3n + 1) {
    text-align: left;
}
.skills-grid div *,
.skills-grid-mini div * {
    display: inline-block;
    vertical-align: middle;
}
.skills-grid div span,
.skills-grid-mini div span {
    color: black;
}
.charactersheet .skills-grid div label,
.charactersheet .skills-grid-mini div label {
    font: normal 10px 'Roboto', sans-serif;
    display: inline-block;
    width: auto;
    height: auto;
    box-shadow: none;
    padding: 0px;
    margin: 0px;
    background: none;
    color: black;
    text-transform: none;
}
body .charactersheet .skills-grid div input[type=number] {
    font: 10px 'Roboto', sans-serif;
    display: inline-block;
    width: 100%;
    height: 20px;
    line-height: 20px;
    border: 1px solid white;
    border-radius: 0px;
    box-shadow: none;
    padding: 0px 2px;
    margin: 0px;
    box-sizing: border-box;
    background: white;
    color: black;
    text-align: center;
    outline: none;
}
.skills-grid .tag,
.skills-grid-mini .tag,
.repitem .tag {
    display: none;
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/fallout-2d20-dev/Fallout%202d20/images/tag.png')
        center / contain no-repeat content-box;
    width: 16px;
    height: 16px;
    text-height: 2px;
    text-indent: -9999px;
}
.skills-grid .tag-skill[value="1"] ~ span.tag,
.skills-grid-mini .tag-skill[value="1"] ~ span.tag,
.repitem .tag {
    display: inline-block;
}

.origin-tag-name[value=""] + label,
.origin-tag-name[value=""] + label + input,
.origin-tag-name[value=""] + label + input + span {
    display: none;
}

body .charactersheet .meleedmg,
body .charactersheet .defense,
body .charactersheet .initiative {
    background: black;
}
body .charactersheet div .col3 .meleedmg label,
body .charactersheet div .col3 .defense label,
body .charactersheet div .col3 .initiative label {
    background: none;
    box-shadow: none;
}
body .charactersheet div .col3 .meleedmg span,
body .charactersheet div .col3 .defense span,
body .charactersheet div .col3 .initiative span {
    color: white;
    padding: 0px 5px;
    box-shadow: none;
    border: none;
    text-align: right;
    line-height: 20px;
}
body .charactersheet div .col3 .meleedmg .die {
    margin: 0px -5px -7px 2px;
    padding: 0px;
}

.charactersheet .locations {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/fallout-2d20-dev/Fallout%202d20/images/vaultboy-outline.png')
        center / contain no-repeat;
    grid-template-rows: auto;
    align-items: center;
    padding: 10px 0px 0px 0px;
    column-gap: 5px;
}
.charactersheet .locations .location label:not(.header),
.charactersheet .locations .location .label {
    color: black;
    background: none;
    box-shadow: none;
    text-align: right;
}
.charactersheet .locations .location label.header {
    border-bottom: 1px solid black;
    color: black;
    background: none;
    box-shadow: none;
}
body .charactersheet .locations .location input,
.charactersheet .locations .location select,
.inner .input  {
    font-size: 8px;
}
body .charactersheet .grid .locations label.physical-dr,
body .charactersheet .grid .locations label.energy-dr,
body .charactersheet .grid .locations label.rad-dr,
body .charactersheet .grid .locations label.poison-dr {
    box-shadow: none;
    text-align: left;
    text-indent: -9999px;
}
body .charactersheet .grid .locations label.physical-dr {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/fallout-2d20-dev/Fallout%202d20/images/physical.png')
        center / contain no-repeat content-box;
}
body .charactersheet .grid .locations label.energy-dr {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/fallout-2d20-dev/Fallout%202d20/images/energy.png')
        center / contain no-repeat content-box;
}
body .charactersheet .grid .locations label.rad-dr {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/fallout-2d20-dev/Fallout%202d20/images/radiation.png')
        center / contain no-repeat content-box;
}
body .charactersheet .grid .locations label.poison-dr {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/fallout-2d20-dev/Fallout%202d20/images/poison.png')
        right / contain no-repeat content-box;
}
body .charactersheet .locations .col8 > *:nth-child(2) {
    border-left: 1px solid black;
}

.health {
    position: relative;
    background: #C4DECC;
    border: solid 1px white;
    box-sizing: border-box;
    height: 20px;
    line-height: 20px;
    margin: 10px;
    grid-template-columns: 3fr 2fr 1fr 2fr;
}
.health:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: 0px;
    border: 1px solid #45AB7C;
    border-bottom: none;
}
.hp-ratio[value="10"] ~ .health {
    background: linear-gradient(90deg, #45AB7C 10%, #C4DECC 10%);
}
.hp-ratio[value="20"] ~ .health {
    background: linear-gradient(90deg, #45AB7C 20%, #C4DECC 20%);
}
.hp-ratio[value="30"] ~ .health {
    background: linear-gradient(90deg, #45AB7C 30%, #C4DECC 30%);
}
.hp-ratio[value="40"] ~ .health {
    background: linear-gradient(90deg, #45AB7C 40%, #C4DECC 40%);
}
.hp-ratio[value="50"] ~ .health {
    background: linear-gradient(90deg, #45AB7C 50%, #C4DECC 50%);
}
.hp-ratio[value="60"] ~ .health {
    background: linear-gradient(90deg, #45AB7C 60%, #C4DECC 60%);
}
.hp-ratio[value="70"] ~ .health {
    background: linear-gradient(90deg, #45AB7C 70%, #C4DECC 70%);
}
.hp-ratio[value="80"] ~ .health {
    background: linear-gradient(90deg, #45AB7C 80%, #C4DECC 80%);
}
.hp-ratio[value="90"] ~ .health {
    background: linear-gradient(90deg, #45AB7C 90%, #C4DECC 90%);
}
.hp-ratio[value="100"] ~ .health {
    background: #45AB7C;
}
.health span {
    text-align: center;
}
.health label {
    background: none;
    border: none;
    box-shadow: none;
    color: black;
}
body .charactersheet div .col1 .health input[type=number] {
    background: none;
    height: auto;
    box-shadow: none;
    border: none;
    text-align: center;
}

.rep-grid-header,
.rep-grid ~ .repcontainer .repitem {
    display: grid;
    grid-template-rows: auto;
    gap: 1px;
}
.weapons-grid .rep-grid-header,
.weapons-grid .rep-grid ~ .repcontainer .repitem {
    grid-template-rows: 20px;
    grid-template-columns: 3fr 3fr 2fr 4fr 2fr 1fr 1fr 4fr 1fr 1fr;
}
.perks-grid .rep-grid-header,
.perks-grid .rep-grid ~ .repcontainer .repitem {
    grid-template-columns: 3fr 1fr 12fr;
}
.items-grid .rep-grid-header,
.items-grid .rep-grid ~ .repcontainer .repitem {
    grid-template-columns: 6fr 1fr;
}
.ammo-grid .rep-grid-header,
.ammo-grid .rep-grid ~ .repcontainer .repitem {
    grid-template-columns: 5fr 2fr;
}
.rep-grid-header div,
.rep-grid ~ .repcontainer .repitem div {
    text-align: center;
    box-sizing: border-box;
    height: auto;
    overflow: hidden;
    padding: 0px;
    box-shadow: 0 0 0 1px black;
    line-height: 20px;
}
.rep-grid-header div {
    font: bold 10px 'Roboto', sans-serif;
    background: black;
    color: white;
    text-transform: uppercase;
    padding: 5px 2px;
}
.rep-grid ~ .repcontainer .repitem div {
    font: normal 8px 'Roboto', sans-serif;
    background: white;
    color: black;
}
.rep-grid-header div:first-child,
.rep-grid ~ .repcontainer .repitem div:first-child {
    text-align: left;
}
.rep-grid ~ .repcontainer .repitem div input,
.rep-grid ~ .repcontainer .repitem div select,
.rep-grid ~ .repcontainer .repitem div textarea {
    border: solid 1px white;
    box-shadow: none;
    padding: 0px 2px;
}
.rep-grid ~ .repcontainer .repitem div input.melee-damage {
    width: 50%;
}
.rep-grid ~ .repcontainer .repitem div textarea {
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    resize: none;
}
.rep-grid ~ .repcontainer .repitem div input[type=number] {
    text-align: right;
}

body .charactersheet .caps {
    background: linear-gradient(45deg, #e0b829 85%, white 85%);
    width: 100%;
    grid-template-columns: 3fr 1fr;
    margin: -20px 0px 10px 0px;
}
body .charactersheet div .col1 .caps label {
    background: none;
    box-shadow: none;
    margin: 0px -20px 0px 20px;
}
body .charactersheet div .col1 .caps input[type=number] {
    background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/fallout-2d20-dev/Fallout%202d20/images/cap.png')
        center / contain no-repeat content-box;
    height: auto;
    margin: -18px 0px;
    box-shadow: none;
    border: none;
    text-align: right;
}

.charactersheet .origin-brotherhood,
.charactersheet .origin-ghoul,
.charactersheet .origin-mutant,
.charactersheet .origin-robot,
.charactersheet .origin-survivor,
.charactersheet .origin-vault {
    display: none;
}

.origin-choice[value="brotherhood"] ~ .origin-brotherhood,
.origin-choice[value="ghoul"] ~ .origin-ghoul,
.origin-choice[value="mutant"] ~ .origin-mutant,
.origin-choice[value="robot"] ~ .origin-robot,
.origin-choice[value="survivor"] ~ .origin-survivor,
.origin-choice[value="vault"] ~ .origin-vault {
    display: grid;
}

.charactersheet .survivor-trait1,
.charactersheet .survivor-trait2,
.charactersheet .survivor-perk {
    display: none;
}

.survivor-choice[value="trait"] ~ .survivor-trait1,
.survivor-choice[value="trait"] ~ .survivor-trait2,
.survivor-choice[value="perk"] ~ .survivor-trait1,
.survivor-choice[value="perk"] ~ .survivor-perk {
    display: grid;
}

.charactersheet .survivor-educated,
.charactersheet .survivor-fastshot,
.charactersheet .survivor-gifted,
.charactersheet .survivor-heavy,
.charactersheet .survivor-small {
    display: none;
}

.survivor-trait1[value="educated"] ~ .survivor-educated,
.survivor-trait1[value="fast_shot"] ~ .survivor-fastshot,
.survivor-trait1[value="gifted"] ~ .survivor-gifted,
.survivor-trait1[value="heavy_handed"] ~ .survivor-heavy,
.survivor-trait1[value="small_frame"] ~ .survivor-small,
.survivor-choice[value="trait"] ~ .survivor-trait2[value="educated"] ~ .survivor-educated,
.survivor-choice[value="trait"] ~ .survivor-trait2[value="fast_shot"] ~ .survivor-fastshot,
.survivor-choice[value="trait"] ~ .survivor-trait2[value="gifted"] ~ .survivor-gifted,
.survivor-choice[value="trait"] ~ .survivor-trait2[value="heavy_handed"] ~ .survivor-heavy,
.survivor-choice[value="trait"] ~ .survivor-trait2[value="small_frame"] ~ .survivor-small {
    display: inline-block;
}