Files
cbkcook b28a06161a TimeWatch - new character sheet
I've made a new character sheet for TimeWatch, the GUMSHOE time travel game.
2021-06-11 12:09:03 -04:00

1273 lines
40 KiB
CSS

/*----------------- FONTS ------------------*/
@import url('https://fonts.googleapis.com/css?family=Montserrat|Orbitron:wght@700&display=swap');
/*----------------- GRIDS ------------------*/
.sheet-main {
}
.sheet-main-top {
display: grid;
width: 100vw;
height: 90px;
grid-gap: 6px;
grid-template-columns: 200px 1fr 1fr 1fr 300px;
grid-template-rows: 90px;
grid-template-areas:"sheetype header header header tabselector";
}
.sheet-main-pc {
display: grid;
width: 100vw;
height: 600px;
grid-gap: 6px;
grid-template-columns: 200px 240px 200px 100px ;
grid-template-rows: 40px 1fr 40px 1fr 40px 1fr 10px;
grid-template-areas:"credname credname credname credname"
"creda creda credb credb"
"damagename damagename damagename damagename"
"damage damage damage damage"
"equipname equipname equipname equipname"
"equipment equipment equipment equipmentempty"
"pc pc pc pc";
}
.sheet-main-generalabilities {
display: grid;
width: 100vw;
height: 200px;
grid-gap: 6px;
grid-template-columns: 200px 1fr 200px 1fr ;
grid-template-rows: 40px 1fr 40px 1fr 10px;
grid-template-areas:"genname genname genname genname"
"genabilities genabilities genabilities genabilities"
"boostername boostername boostername boostername"
"booster booster booster boosterempty"
"gen gen gen gen";
}
.sheet-main-investigativeabilities {
display: grid;
width: 100vw;
height: 200px;
grid-gap: 6px;
grid-template-columns: 150px 300px 150px 300px ;
grid-template-rows: 40px 1fr 40px 1fr/2 1fr/2 10px;
grid-template-areas:"investnameacademic investnameacademic investnameinterpersonal investnameinterpersonal"
"investabilitiesacademic investabilitiesacademic investabilitiesinterpersonal investabilitiesinterpersonal"
"investnametechnical investnametechnical buildname buildname"
"investabilitiestechnical investabilitiestechnical buildsection buildsection"
"investabilitiestechnical investabilitiestechnical macrosection macrosection"
"invest invest invest invest";
}
.sheet-main-info {
display: grid;
width: 100vw;
height: 200px;
grid-gap: 6px;
grid-template-columns: 1fr ;
grid-template-rows: 40px 1fr 40px 1fr 40px 1fr 10px;
grid-template-areas:"charhistoryname "
"charhistory "
"charinteractionsname "
"charinteractions "
"charnotesname "
"charnotes "
"info ";
}
/*----------------- GENERAL CSS ------------------*/
textarea {
width: 70%;
height: 85%;
}
textarea.sheet-notetext{
width: 800px;
height: 140px;
}
.sheet-section {
padding: 5px;
border-style: solid;
justify-content: center;
}
.sheet-flex-col {
display: flex;
flex-flow: row wrap;
/*justify-content: flex-start;*/
}
.sheet-flex-col-center {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
/*justify-content: flex-start;*/
}
.sheet-flex-center {
display: grid;
justify-content: center;
align-content: center;
}
.sheet-hide-section {
display: none;
}
/* --------------------------------Hide and Display section of Code-------------------------------- */
/* Configure the tab buttons*/
.sheet-main-pc,
.sheet-main-generalabilities,
.sheet-main-investigativeabilities,
.sheet-main-info {display: none;}
/* show the selected tab */
.sheet-tabstoggle[value="pc"] ~ div.sheet-main-pc,
.sheet-tabstoggle[value="generalabilities"] ~ div.sheet-main-generalabilities,
.sheet-tabstoggle[value="investigativeabilities"] ~ div.sheet-main-investigativeabilities,
.sheet-tabstoggle[value="info"] ~ div.sheet-main-info {display: grid;}
/*------------- Section-specific CSS -------------*/
h1 {
font-family: 'Orbitron', sans-serif;
color: rgb(75, 222, 85);
}
h2 {
font-family: 'Orbitron', sans-serif;
color: rgb(75, 222, 85);
}
label {
font-family: 'Montserrat', sans-serif;
color: rgb(13, 84, 18);
justify-content: center;
display: inline;
font-size: 1em;
font-weight: normal;
line-height: 25px;
margin-bottom: 0px;
}
label.sheet-damage,
label.sheet-genabilities,
label.sheet-investabilitiesacademic,
label.sheet-investabilitiesinterpersonal,
label.sheet-investabilitiestechnical,
label.sheet-buildsection,
label.sheet-macrosection {
font-family: 'Montserrat', sans-serif;
color: rgb(13, 84, 18);
justify-content: center;
align-content: center;
display: inline;
font-size: 1.5em;
font-weight: normal;
line-height: 20px;
margin-bottom: 0px;
}
input.sheet-damage,
input.sheet-genabilities,
input.sheet-investabilitiesacademic,
input.sheet-investabilitiesinterpersonal,
input.sheet-investabilitiestechnical,
input.sheet-buildsection {
height:20px;
width:20px;
}
span.sheet-currentval {
font-family: 'Montserrat', sans-serif;
color: rgb(13, 84, 18);
display: inline;
font-size: 1.5em;
font-weight: normal;
line-height: 20px;
margin-bottom: 0px;
/*display: flex;
justify-content: center;
align-items: center;*/
}
input {
height:25px;
}
button.sheet-tabbutton,
button.sheet-genname,
button.sheet-macrosection {
font-family: 'Montserrat', sans-serif;
background-color: rgb(13, 84, 18);
color: rgb(75, 222, 85);
border-radius: 10px;
box-shadow:
inset 0 0 2px 0 rgba(255,255,255,.4),
inset 0 0 3px 0 rgba(0,0,0,.4),
inset 0 0 3px 5px rgba(0,0,0,.05),
2px 2px 4px 0 rgba(0,0,0,.25);
}
.charsheet .repcontrol_add,
.charsheet .repcontrol_edit,
.charsheet .repcontrol_del {
/*font-family: 'Montserrat', sans-serif;*/
background: rgb(13, 84, 18);
color: rgb(75, 222, 85);
display: block;
border-radius: 10px;
box-shadow:
inset 0 0 2px 0 rgba(255,255,255,.4),
inset 0 0 3px 0 rgba(0,0,0,.4),
inset 0 0 3px 5px rgba(0,0,0,.05),
2px 2px 4px 0 rgba(0,0,0,.25);
}
.sheet-header {
grid-area: header;
font-family: 'Orbitron', sans-serif;
color: green;
/*flex-direction: column;*/
}
.sheet-sheettype {
grid-area: sheetype;
font-family: 'Montserrat', sans-serif
color: green;
/*flex-direction: column;*/
}
.sheet-tabselector {
grid-area: tabselector;
font-family: 'Montserrat', sans-serif
color: green;
/*flex-direction: column;*/
}
.sheet-pc {
grid-area: pc;
}
.sheet-credname {
grid-area: credname;
}
.sheet-creda {
grid-area: creda;
grid-template-columns: 180px 120px;
display: grid;
grid-template-rows: 30px 30px 30px 30px 30px 30px 30px;
}
.sheet-credb {
grid-area: credb;
grid-template-columns: 140px 60px 30px 55px;
display: grid;
grid-template-rows: 30px 30px 30px;
}
.sheet-damagename {
grid-area: damagename;
}
.sheet-damage {
grid-area: damage;
grid-template-columns: 140px 55px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 10px 55px ;
display: grid;
grid-template-rows: 25px 10px 25px 10px 25px;
}
.sheet-trackname {
grid-area: trackname;
}
.sheet-equipname {
grid-area: equipname;
}
.sheet-equipment {
grid-area: equipment;
}
.sheet-genname {
grid-area: genname;
}
.sheet-genabilities {
grid-area: genabilities;
grid-template-columns: 140px 55px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 22px 10px 55px ;
display: grid;
grid-template-rows: 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px;
}
.sheet-boostername {
grid-area: boostername;
}
.sheet-booster {
grid-area: booster;
}
.sheet-generalabilities {
grid-area: gen;
}
.sheet-investigativeabilities {
grid-area: invest;
}
.sheet-investnameacademic {
grid-area: investnameacademic;
}
.sheet-investnameinterpersonal {
grid-area: investnameinterpersonal;
}
.sheet-investnametechnical {
grid-area: investnametechnical;
}
.sheet-investabilitiesacademic {
grid-area: investabilitiesacademic;
grid-template-columns: 190px 55px 22px 22px 22px 22px 22px 22px 10px 55px ;
display: grid;
grid-template-rows: 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px;
}
.sheet-investabilitiesinterpersonal {
grid-area: investabilitiesinterpersonal;
grid-template-columns: 170px 55px 22px 22px 22px 22px 22px 22px 10px 55px ;
display: grid;
grid-template-rows: 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px;
}
.sheet-investabilitiestechnical {
grid-area: investabilitiestechnical;
grid-template-columns: 190px 55px 22px 22px 22px 22px 22px 22px 10px 55px ;
display: grid;
grid-template-rows: 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px 25px 10px;
}
.sheet-buildname {
grid-area: buildname;
}
.sheet-buildsection {
grid-area: buildsection;
grid-template-columns: 170px 55px 10px 55px 10px 55px 10px ;
display: grid;
grid-template-rows: 25px 10px 25px 10px 25px 10px;
}
.sheet-macrosection {
grid-area: macrosection;
grid-template-columns: 400px 10px ;
display: grid;
grid-template-rows: 80px 10px;
}
.sheet-info {
grid-area: info;
}
.sheet-charhistoryname {
grid-area: charhistoryname;
}
.sheet-charhistory {
grid-area: charhistory;
}
.sheet-charinteractionsname {
grid-area: charinteractionsname;
}
.sheet-charinteractions {
grid-area: charinteractions;
}
.sheet-charnotesname {
grid-area: charnotesname;
}
.sheet-charnotes {
grid-area: charnotes;
}
/* Format repeating sections */
div.sheet-equipment-row,
div.sheet-booster-row {
display: grid;
grid-template-columns: 250px 600px;
column-gap: 5px;
}
div.sheet-equipment-row input[type="text"],
div.sheet-booster-row input[type="text"] {
width: 250px;
height: 50.21px;
}
div.sheet-equipment-row textarea,
div.sheet-booster-row textarea {
width: 550px;
height: 40px;
}
div.sheet-equipment-row input[type="number"],
div.sheet-booster-row input[type="number"] {
width: 50px;
}
/* Roll template formatting */
/* Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-custom {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-custom {
margin-left: -7px;
}
.sheet-rolltemplate-custom .sheet-container {
border: 1px solid;
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
border-color: var(--header-bg-color);
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-custom .sheet-header {
background-color: var(--header-bg-color);
/* change text-align to center to center the header text */
text-align: left;
color: var(--header-text-color);
padding: 5px;
}
.sheet-rolltemplate-custom .sheet-title {
font-size:1.1em;
}
.sheet-rolltemplate-custom .sheet-subtitle {
font-size:.9em;
}
.sheet-rolld6 {
color: #500000;
background: none;
border: none;
font-weight: bolder;
}
.sheet-sheettype button[type=roll].sheet-rolld6::before {
font-family: "dicefontd6";
content: "F";
font-size: 2em;
color: rgb(13, 84, 18);
}
/* example colors */
.sheet-rolltemplate-custom .sheet-container {
/* this is the default color */
--header-bg-color: rgb(13, 84, 18);
--header-text-color: #FFF;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-red {
--header-bg-color: #F00;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-green {
--header-bg-color: #0F0;
--header-text-color: #000;
}
/* Allprops part */
.sheet-rolltemplate-custom .sheet-content {
display: grid;
background: #FFF;
/* Header formatting - modify the column layout below */
grid-template-columns: auto auto;
/* Line height to match default roll template */
line-height:1.4em;
}
.sheet-rolltemplate-custom .sheet-content > div {
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-custom .sheet-content .sheet-key {
font-weight: bold;
padding-right: 10px;
text-align: right;
}
/* Empty rule, use this if you want to change the right column
.sheet-rolltemplate-custom .sheet-value {
}
*/
/* Make even-numbered rows grey */
.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom .sheet-content :nth-child(4n) {
background:#EEE;
}
/* Description field */
.sheet-rolltemplate-custom .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
}
/* Configure the button styling. This example makes it look like a radio. */
button.sheet-athletics,
button.sheet-burglary,
button.sheet-disguise,
button.sheet-medic,
button.sheet-preparedness,
button.sheet-realityanchor,
button.sheet-scuffling,
button.sheet-shooting,
button.sheet-tinkering,
button.sheet-unobtrusiveness,
button.sheet-vehicles,
button.sheet-dot,
button.sheet-healthtrack,
button.sheet-anthropology,
button.sheet-architecture,
button.sheet-historyancient,
button.sheet-historycontemporary,
button.sheet-historyfuture,
button.sheet-militarytactics,
button.sheet-research,
button.sheet-timecraft,
button.sheet-trivia,
button.sheet-authority,
button.sheet-bureaucracy,
button.sheet-charm,
button.sheet-falsehooddetection,
button.sheet-highsociety,
button.sheet-intimidation,
button.sheet-reassurance,
button.sheet-streetwise,
button.sheet-taunt,
button.sheet-forgery,
button.sheet-hacking,
button.sheet-medicalexpertise,
button.sheet-notice,
button.sheet-outdoorsurvival,
button.sheet-paradoxprevention,
button.sheet-science,
button.sheet-spying {
padding: 0;
border: solid 1px #a8a8a8;
cursor: pointer;
width: 20px;
height: 20px;
border-radius: 50%;
/*display: flex;*/
background-color: rgb(13, 84, 18);
/*justify-content: center;
align-items: center;*/
}
/********************* Button formatting for bubbles when clicked the rest of the way down ************************/
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.sheet-dot[value="0"] ~ button.sheet-gt-0,
input.sheet-dot[value="1"] ~ button.sheet-gt-1,
input.sheet-dot[value="2"] ~ button.sheet-gt-2,
input.sheet-dot[value="3"] ~ button.sheet-gt-3,
input.sheet-dot[value="4"] ~ button.sheet-gt-4,
input.sheet-dot[value="5"] ~ button.sheet-gt-5,
input.sheet-dot[value="6"] ~ button.sheet-gt-6,
input.sheet-dot[value="7"] ~ button.sheet-gt-7,
input.sheet-dot[value="8"] ~ button.sheet-gt-8,
input.sheet-dot[value="9"] ~ button.sheet-gt-9,
input.sheet-dot[value="10"] ~ button.sheet-gt-10,
input.sheet-dot[value="11"] ~ button.sheet-gt-11,
input.sheet-dot[value="12"] ~ button.sheet-gt-12,
input.sheet-dot[value="13"] ~ button.sheet-gt-13,
input.sheet-dot[value="14"] ~ button.sheet-gt-14,
input.sheet-dot[value="15"] ~ button.sheet-gt-15,
input.sheet-dot[value="16"] ~ button.sheet-gt-16,
input.sheet-dot[value="17"] ~ button.sheet-gt-17,
input.sheet-dot[value="18"] ~ button.sheet-gt-18,
input.sheet-dot[value="19"] ~ button.sheet-gt-19,
input.sheet-dot[value="20"] ~ button.sheet-gt-20,
input.sheet-dot[value="21"] ~ button.sheet-gt-21,
input.sheet-dot[value="22"] ~ button.sheet-gt-22,
input.sheet-dot[value="23"] ~ button.sheet-gt-23,
input.sheet-dot[value="24"] ~ button.sheet-gt-24,
input.sheet-dot[value="25"] ~ button.sheet-gt-25,
input.sheet-dot[value="26"] ~ button.sheet-gt-26 {
background-color: rgb(204, 221, 202);
}
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.sheet-healthtrack[value="0"] ~ button.sheet-gh-0,
input.sheet-healthtrack[value="1"] ~ button.sheet-gh-1,
input.sheet-healthtrack[value="2"] ~ button.sheet-gh-2,
input.sheet-healthtrack[value="3"] ~ button.sheet-gh-3,
input.sheet-healthtrack[value="4"] ~ button.sheet-gh-4,
input.sheet-healthtrack[value="5"] ~ button.sheet-gh-5,
input.sheet-healthtrack[value="6"] ~ button.sheet-gh-6,
input.sheet-healthtrack[value="7"] ~ button.sheet-gh-7,
input.sheet-healthtrack[value="8"] ~ button.sheet-gh-8,
input.sheet-healthtrack[value="9"] ~ button.sheet-gh-9,
input.sheet-healthtrack[value="10"] ~ button.sheet-gh-10,
input.sheet-healthtrack[value="11"] ~ button.sheet-gh-11,
input.sheet-healthtrack[value="12"] ~ button.sheet-gh-12,
input.sheet-healthtrack[value="13"] ~ button.sheet-gh-13,
input.sheet-healthtrack[value="14"] ~ button.sheet-gh-14,
input.sheet-healthtrack[value="15"] ~ button.sheet-gh-15,
input.sheet-healthtrack[value="16"] ~ button.sheet-gh-16,
input.sheet-healthtrack[value="17"] ~ button.sheet-gh-17,
input.sheet-healthtrack[value="18"] ~ button.sheet-gh-18,
input.sheet-healthtrack[value="19"] ~ button.sheet-gh-19,
input.sheet-healthtrack[value="20"] ~ button.sheet-gh-20,
input.sheet-healthtrack[value="21"] ~ button.sheet-gh-21,
input.sheet-healthtrack[value="22"] ~ button.sheet-gh-22,
input.sheet-healthtrack[value="23"] ~ button.sheet-gh-23,
input.sheet-healthtrack[value="24"] ~ button.sheet-gh-24,
input.sheet-healthtrack[value="25"] ~ button.sheet-gh-25,
input.sheet-healthtrack[value="26"] ~ button.sheet-gh-26 {
background-color: rgb(204, 221, 202);
}
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.sheet-athletics[value="0"] ~ button.sheet-ga-0,
input.sheet-athletics[value="1"] ~ button.sheet-ga-1,
input.sheet-athletics[value="2"] ~ button.sheet-ga-2,
input.sheet-athletics[value="3"] ~ button.sheet-ga-3,
input.sheet-athletics[value="4"] ~ button.sheet-ga-4,
input.sheet-athletics[value="5"] ~ button.sheet-ga-5,
input.sheet-athletics[value="6"] ~ button.sheet-ga-6,
input.sheet-athletics[value="7"] ~ button.sheet-ga-7,
input.sheet-athletics[value="8"] ~ button.sheet-ga-8,
input.sheet-athletics[value="9"] ~ button.sheet-ga-9,
input.sheet-athletics[value="10"] ~ button.sheet-ga-10,
input.sheet-athletics[value="11"] ~ button.sheet-ga-11,
input.sheet-athletics[value="12"] ~ button.sheet-ga-12,
input.sheet-athletics[value="13"] ~ button.sheet-ga-13,
input.sheet-athletics[value="14"] ~ button.sheet-ga-14,
input.sheet-athletics[value="15"] ~ button.sheet-ga-15,
input.sheet-athletics[value="16"] ~ button.sheet-ga-16,
input.sheet-athletics[value="17"] ~ button.sheet-ga-17,
input.sheet-athletics[value="18"] ~ button.sheet-ga-18 {
background-color: rgb(204, 221, 202);
}
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.sheet-burglary[value="0"] ~ button.sheet-gb-0,
input.sheet-burglary[value="1"] ~ button.sheet-gb-1,
input.sheet-burglary[value="2"] ~ button.sheet-gb-2,
input.sheet-burglary[value="3"] ~ button.sheet-gb-3,
input.sheet-burglary[value="4"] ~ button.sheet-gb-4,
input.sheet-burglary[value="5"] ~ button.sheet-gb-5,
input.sheet-burglary[value="6"] ~ button.sheet-gb-6,
input.sheet-burglary[value="7"] ~ button.sheet-gb-7,
input.sheet-burglary[value="8"] ~ button.sheet-gb-8,
input.sheet-burglary[value="9"] ~ button.sheet-gb-9,
input.sheet-burglary[value="10"] ~ button.sheet-gb-10,
input.sheet-burglary[value="11"] ~ button.sheet-gb-11,
input.sheet-burglary[value="12"] ~ button.sheet-gb-12,
input.sheet-burglary[value="13"] ~ button.sheet-gb-13,
input.sheet-burglary[value="14"] ~ button.sheet-gb-14,
input.sheet-burglary[value="15"] ~ button.sheet-gb-15,
input.sheet-burglary[value="16"] ~ button.sheet-gb-16,
input.sheet-burglary[value="17"] ~ button.sheet-gb-17,
input.sheet-burglary[value="18"] ~ button.sheet-gb-18 {
background-color: rgb(204, 221, 202);
}
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.sheet-disguise[value="0"] ~ button.sheet-gc-0,
input.sheet-disguise[value="1"] ~ button.sheet-gc-1,
input.sheet-disguise[value="2"] ~ button.sheet-gc-2,
input.sheet-disguise[value="3"] ~ button.sheet-gc-3,
input.sheet-disguise[value="4"] ~ button.sheet-gc-4,
input.sheet-disguise[value="5"] ~ button.sheet-gc-5,
input.sheet-disguise[value="6"] ~ button.sheet-gc-6,
input.sheet-disguise[value="7"] ~ button.sheet-gc-7,
input.sheet-disguise[value="8"] ~ button.sheet-gc-8,
input.sheet-disguise[value="9"] ~ button.sheet-gc-9,
input.sheet-disguise[value="10"] ~ button.sheet-gc-10,
input.sheet-disguise[value="11"] ~ button.sheet-gc-11,
input.sheet-disguise[value="12"] ~ button.sheet-gc-12,
input.sheet-disguise[value="13"] ~ button.sheet-gc-13,
input.sheet-disguise[value="14"] ~ button.sheet-gc-14,
input.sheet-disguise[value="15"] ~ button.sheet-gc-15,
input.sheet-disguise[value="16"] ~ button.sheet-gc-16,
input.sheet-disguise[value="17"] ~ button.sheet-gc-17,
input.sheet-disguise[value="18"] ~ button.sheet-gc-18 {
background-color: rgb(204, 221, 202);
}
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.sheet-medic[value="0"] ~ button.sheet-gd-0,
input.sheet-medic[value="1"] ~ button.sheet-gd-1,
input.sheet-medic[value="2"] ~ button.sheet-gd-2,
input.sheet-medic[value="3"] ~ button.sheet-gd-3,
input.sheet-medic[value="4"] ~ button.sheet-gd-4,
input.sheet-medic[value="5"] ~ button.sheet-gd-5,
input.sheet-medic[value="6"] ~ button.sheet-gd-6,
input.sheet-medic[value="7"] ~ button.sheet-gd-7,
input.sheet-medic[value="8"] ~ button.sheet-gd-8,
input.sheet-medic[value="9"] ~ button.sheet-gd-9,
input.sheet-medic[value="10"] ~ button.sheet-gd-10,
input.sheet-medic[value="11"] ~ button.sheet-gd-11,
input.sheet-medic[value="12"] ~ button.sheet-gd-12,
input.sheet-medic[value="13"] ~ button.sheet-gd-13,
input.sheet-medic[value="14"] ~ button.sheet-gd-14,
input.sheet-medic[value="15"] ~ button.sheet-gd-15,
input.sheet-medic[value="16"] ~ button.sheet-gd-16,
input.sheet-medic[value="17"] ~ button.sheet-gd-17,
input.sheet-medic[value="18"] ~ button.sheet-gd-18 {
background-color: rgb(204, 221, 202);
}
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.sheet-preparedness[value="0"] ~ button.sheet-ge-0,
input.sheet-preparedness[value="1"] ~ button.sheet-ge-1,
input.sheet-preparedness[value="2"] ~ button.sheet-ge-2,
input.sheet-preparedness[value="3"] ~ button.sheet-ge-3,
input.sheet-preparedness[value="4"] ~ button.sheet-ge-4,
input.sheet-preparedness[value="5"] ~ button.sheet-ge-5,
input.sheet-preparedness[value="6"] ~ button.sheet-ge-6,
input.sheet-preparedness[value="7"] ~ button.sheet-ge-7,
input.sheet-preparedness[value="8"] ~ button.sheet-ge-8,
input.sheet-preparedness[value="9"] ~ button.sheet-ge-9,
input.sheet-preparedness[value="10"] ~ button.sheet-ge-10,
input.sheet-preparedness[value="11"] ~ button.sheet-ge-11,
input.sheet-preparedness[value="12"] ~ button.sheet-ge-12,
input.sheet-preparedness[value="13"] ~ button.sheet-ge-13,
input.sheet-preparedness[value="14"] ~ button.sheet-ge-14,
input.sheet-preparedness[value="15"] ~ button.sheet-ge-15,
input.sheet-preparedness[value="16"] ~ button.sheet-ge-16,
input.sheet-preparedness[value="17"] ~ button.sheet-ge-17,
input.sheet-preparedness[value="18"] ~ button.sheet-ge-18 {
background-color: rgb(204, 221, 202);
}
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.sheet-realityanchor[value="0"] ~ button.sheet-gf-0,
input.sheet-realityanchor[value="1"] ~ button.sheet-gf-1,
input.sheet-realityanchor[value="2"] ~ button.sheet-gf-2,
input.sheet-realityanchor[value="3"] ~ button.sheet-gf-3,
input.sheet-realityanchor[value="4"] ~ button.sheet-gf-4,
input.sheet-realityanchor[value="5"] ~ button.sheet-gf-5,
input.sheet-realityanchor[value="6"] ~ button.sheet-gf-6,
input.sheet-realityanchor[value="7"] ~ button.sheet-gf-7,
input.sheet-realityanchor[value="8"] ~ button.sheet-gf-8,
input.sheet-realityanchor[value="9"] ~ button.sheet-gf-9,
input.sheet-realityanchor[value="10"] ~ button.sheet-gf-10,
input.sheet-realityanchor[value="11"] ~ button.sheet-gf-11,
input.sheet-realityanchor[value="12"] ~ button.sheet-gf-12,
input.sheet-realityanchor[value="13"] ~ button.sheet-gf-13,
input.sheet-realityanchor[value="14"] ~ button.sheet-gf-14,
input.sheet-realityanchor[value="15"] ~ button.sheet-gf-15,
input.sheet-realityanchor[value="16"] ~ button.sheet-gf-16,
input.sheet-realityanchor[value="17"] ~ button.sheet-gf-17,
input.sheet-realityanchor[value="18"] ~ button.sheet-gf-18 {
background-color: rgb(204, 221, 202);
}
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.sheet-scuffling[value="0"] ~ button.sheet-gg-0,
input.sheet-scuffling[value="1"] ~ button.sheet-gg-1,
input.sheet-scuffling[value="2"] ~ button.sheet-gg-2,
input.sheet-scuffling[value="3"] ~ button.sheet-gg-3,
input.sheet-scuffling[value="4"] ~ button.sheet-gg-4,
input.sheet-scuffling[value="5"] ~ button.sheet-gg-5,
input.sheet-scuffling[value="6"] ~ button.sheet-gg-6,
input.sheet-scuffling[value="7"] ~ button.sheet-gg-7,
input.sheet-scuffling[value="8"] ~ button.sheet-gg-8,
input.sheet-scuffling[value="9"] ~ button.sheet-gg-9,
input.sheet-scuffling[value="10"] ~ button.sheet-gg-10,
input.sheet-scuffling[value="11"] ~ button.sheet-gg-11,
input.sheet-scuffling[value="12"] ~ button.sheet-gg-12,
input.sheet-scuffling[value="13"] ~ button.sheet-gg-13,
input.sheet-scuffling[value="14"] ~ button.sheet-gg-14,
input.sheet-scuffling[value="15"] ~ button.sheet-gg-15,
input.sheet-scuffling[value="16"] ~ button.sheet-gg-16,
input.sheet-scuffling[value="17"] ~ button.sheet-gg-17,
input.sheet-scuffling[value="18"] ~ button.sheet-gg-18 {
background-color: rgb(204, 221, 202);
}
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.sheet-shooting[value="0"] ~ button.sheet-gi-0,
input.sheet-shooting[value="1"] ~ button.sheet-gi-1,
input.sheet-shooting[value="2"] ~ button.sheet-gi-2,
input.sheet-shooting[value="3"] ~ button.sheet-gi-3,
input.sheet-shooting[value="4"] ~ button.sheet-gi-4,
input.sheet-shooting[value="5"] ~ button.sheet-gi-5,
input.sheet-shooting[value="6"] ~ button.sheet-gi-6,
input.sheet-shooting[value="7"] ~ button.sheet-gi-7,
input.sheet-shooting[value="8"] ~ button.sheet-gi-8,
input.sheet-shooting[value="9"] ~ button.sheet-gi-9,
input.sheet-shooting[value="10"] ~ button.sheet-gi-10,
input.sheet-shooting[value="11"] ~ button.sheet-gi-11,
input.sheet-shooting[value="12"] ~ button.sheet-gi-12,
input.sheet-shooting[value="13"] ~ button.sheet-gi-13,
input.sheet-shooting[value="14"] ~ button.sheet-gi-14,
input.sheet-shooting[value="15"] ~ button.sheet-gi-15,
input.sheet-shooting[value="16"] ~ button.sheet-gi-16,
input.sheet-shooting[value="17"] ~ button.sheet-gi-17,
input.sheet-shooting[value="18"] ~ button.sheet-gi-18 {
background-color: rgb(204, 221, 202);
}
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.sheet-tinkering[value="0"] ~ button.sheet-gj-0,
input.sheet-tinkering[value="1"] ~ button.sheet-gj-1,
input.sheet-tinkering[value="2"] ~ button.sheet-gj-2,
input.sheet-tinkering[value="3"] ~ button.sheet-gj-3,
input.sheet-tinkering[value="4"] ~ button.sheet-gj-4,
input.sheet-tinkering[value="5"] ~ button.sheet-gj-5,
input.sheet-tinkering[value="6"] ~ button.sheet-gj-6,
input.sheet-tinkering[value="7"] ~ button.sheet-gj-7,
input.sheet-tinkering[value="8"] ~ button.sheet-gj-8,
input.sheet-tinkering[value="9"] ~ button.sheet-gj-9,
input.sheet-tinkering[value="10"] ~ button.sheet-gj-10,
input.sheet-tinkering[value="11"] ~ button.sheet-gj-11,
input.sheet-tinkering[value="12"] ~ button.sheet-gj-12,
input.sheet-tinkering[value="13"] ~ button.sheet-gj-13,
input.sheet-tinkering[value="14"] ~ button.sheet-gj-14,
input.sheet-tinkering[value="15"] ~ button.sheet-gj-15,
input.sheet-tinkering[value="16"] ~ button.sheet-gj-16,
input.sheet-tinkering[value="17"] ~ button.sheet-gj-17,
input.sheet-tinkering[value="18"] ~ button.sheet-gj-18 {
background-color: rgb(204, 221, 202);
}
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.sheet-unobtrusiveness[value="0"] ~ button.sheet-gk-0,
input.sheet-unobtrusiveness[value="1"] ~ button.sheet-gk-1,
input.sheet-unobtrusiveness[value="2"] ~ button.sheet-gk-2,
input.sheet-unobtrusiveness[value="3"] ~ button.sheet-gk-3,
input.sheet-unobtrusiveness[value="4"] ~ button.sheet-gk-4,
input.sheet-unobtrusiveness[value="5"] ~ button.sheet-gk-5,
input.sheet-unobtrusiveness[value="6"] ~ button.sheet-gk-6,
input.sheet-unobtrusiveness[value="7"] ~ button.sheet-gk-7,
input.sheet-unobtrusiveness[value="8"] ~ button.sheet-gk-8,
input.sheet-unobtrusiveness[value="9"] ~ button.sheet-gk-9,
input.sheet-unobtrusiveness[value="10"] ~ button.sheet-gk-10,
input.sheet-unobtrusiveness[value="11"] ~ button.sheet-gk-11,
input.sheet-unobtrusiveness[value="12"] ~ button.sheet-gk-12,
input.sheet-unobtrusiveness[value="13"] ~ button.sheet-gk-13,
input.sheet-unobtrusiveness[value="14"] ~ button.sheet-gk-14,
input.sheet-unobtrusiveness[value="15"] ~ button.sheet-gk-15,
input.sheet-unobtrusiveness[value="16"] ~ button.sheet-gk-16,
input.sheet-unobtrusiveness[value="17"] ~ button.sheet-gk-17,
input.sheet-unobtrusiveness[value="18"] ~ button.sheet-gk-18 {
background-color: rgb(204, 221, 202);
}
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.sheet-vehicles[value="0"] ~ button.sheet-gl-0,
input.sheet-vehicles[value="1"] ~ button.sheet-gl-1,
input.sheet-vehicles[value="2"] ~ button.sheet-gl-2,
input.sheet-vehicles[value="3"] ~ button.sheet-gl-3,
input.sheet-vehicles[value="4"] ~ button.sheet-gl-4,
input.sheet-vehicles[value="5"] ~ button.sheet-gl-5,
input.sheet-vehicles[value="6"] ~ button.sheet-gl-6,
input.sheet-vehicles[value="7"] ~ button.sheet-gl-7,
input.sheet-vehicles[value="8"] ~ button.sheet-gl-8,
input.sheet-vehicles[value="9"] ~ button.sheet-gl-9,
input.sheet-vehicles[value="10"] ~ button.sheet-gl-10,
input.sheet-vehicles[value="11"] ~ button.sheet-gl-11,
input.sheet-vehicles[value="12"] ~ button.sheet-gl-12,
input.sheet-vehicles[value="13"] ~ button.sheet-gl-13,
input.sheet-vehicles[value="14"] ~ button.sheet-gl-14,
input.sheet-vehicles[value="15"] ~ button.sheet-gl-15,
input.sheet-vehicles[value="16"] ~ button.sheet-gl-16,
input.sheet-vehicles[value="17"] ~ button.sheet-gl-17,
input.sheet-vehicles[value="18"] ~ button.sheet-gl-18 {
background-color: rgb(204, 221, 202);
}
input.sheet-anthropology[value="0"] ~ button.sheet-ga1-0,
input.sheet-anthropology[value="1"] ~ button.sheet-ga1-1,
input.sheet-anthropology[value="2"] ~ button.sheet-ga1-2,
input.sheet-anthropology[value="3"] ~ button.sheet-ga1-3,
input.sheet-anthropology[value="4"] ~ button.sheet-ga1-4,
input.sheet-anthropology[value="5"] ~ button.sheet-ga1-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-architecture[value="0"] ~ button.sheet-ga2-0,
input.sheet-architecture[value="1"] ~ button.sheet-ga2-1,
input.sheet-architecture[value="2"] ~ button.sheet-ga2-2,
input.sheet-architecture[value="3"] ~ button.sheet-ga2-3,
input.sheet-architecture[value="4"] ~ button.sheet-ga2-4,
input.sheet-architecture[value="5"] ~ button.sheet-ga2-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-historyancient[value="0"] ~ button.sheet-ga3-0,
input.sheet-historyancient[value="1"] ~ button.sheet-ga3-1,
input.sheet-historyancient[value="2"] ~ button.sheet-ga3-2,
input.sheet-historyancient[value="3"] ~ button.sheet-ga3-3,
input.sheet-historyancient[value="4"] ~ button.sheet-ga3-4,
input.sheet-historyancient[value="5"] ~ button.sheet-ga3-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-historycontemporary[value="0"] ~ button.sheet-ga4-0,
input.sheet-historycontemporary[value="1"] ~ button.sheet-ga4-1,
input.sheet-historycontemporary[value="2"] ~ button.sheet-ga4-2,
input.sheet-historycontemporary[value="3"] ~ button.sheet-ga4-3,
input.sheet-historycontemporary[value="4"] ~ button.sheet-ga4-4,
input.sheet-historycontemporary[value="5"] ~ button.sheet-ga4-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-historyfuture[value="0"] ~ button.sheet-ga5-0,
input.sheet-historyfuture[value="1"] ~ button.sheet-ga5-1,
input.sheet-historyfuture[value="2"] ~ button.sheet-ga5-2,
input.sheet-historyfuture[value="3"] ~ button.sheet-ga5-3,
input.sheet-historyfuture[value="4"] ~ button.sheet-ga5-4,
input.sheet-historyfuture[value="5"] ~ button.sheet-ga5-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-militarytactics[value="0"] ~ button.sheet-ga6-0,
input.sheet-militarytactics[value="1"] ~ button.sheet-ga6-1,
input.sheet-militarytactics[value="2"] ~ button.sheet-ga6-2,
input.sheet-militarytactics[value="3"] ~ button.sheet-ga6-3,
input.sheet-militarytactics[value="4"] ~ button.sheet-ga6-4,
input.sheet-militarytactics[value="5"] ~ button.sheet-ga6-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-research[value="0"] ~ button.sheet-ga7-0,
input.sheet-research[value="1"] ~ button.sheet-ga7-1,
input.sheet-research[value="2"] ~ button.sheet-ga7-2,
input.sheet-research[value="3"] ~ button.sheet-ga7-3,
input.sheet-research[value="4"] ~ button.sheet-ga7-4,
input.sheet-research[value="5"] ~ button.sheet-ga7-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-timecraft[value="0"] ~ button.sheet-ga8-0,
input.sheet-timecraft[value="1"] ~ button.sheet-ga8-1,
input.sheet-timecraft[value="2"] ~ button.sheet-ga8-2,
input.sheet-timecraft[value="3"] ~ button.sheet-ga8-3,
input.sheet-timecraft[value="4"] ~ button.sheet-ga8-4,
input.sheet-timecraft[value="5"] ~ button.sheet-ga8-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-trivia[value="0"] ~ button.sheet-ga9-0,
input.sheet-trivia[value="1"] ~ button.sheet-ga9-1,
input.sheet-trivia[value="2"] ~ button.sheet-ga9-2,
input.sheet-trivia[value="3"] ~ button.sheet-ga9-3,
input.sheet-trivia[value="4"] ~ button.sheet-ga9-4,
input.sheet-trivia[value="5"] ~ button.sheet-ga9-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-authority[value="0"] ~ button.sheet-gi1-0,
input.sheet-authority[value="1"] ~ button.sheet-gi1-1,
input.sheet-authority[value="2"] ~ button.sheet-gi1-2,
input.sheet-authority[value="3"] ~ button.sheet-gi1-3,
input.sheet-authority[value="4"] ~ button.sheet-gi1-4,
input.sheet-authority[value="5"] ~ button.sheet-gi1-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-bureaucracy[value="0"] ~ button.sheet-gi2-0,
input.sheet-bureaucracy[value="1"] ~ button.sheet-gi2-1,
input.sheet-bureaucracy[value="2"] ~ button.sheet-gi2-2,
input.sheet-bureaucracy[value="3"] ~ button.sheet-gi2-3,
input.sheet-bureaucracy[value="4"] ~ button.sheet-gi2-4,
input.sheet-bureaucracy[value="5"] ~ button.sheet-gi2-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-charm[value="0"] ~ button.sheet-gi3-0,
input.sheet-charm[value="1"] ~ button.sheet-gi3-1,
input.sheet-charm[value="2"] ~ button.sheet-gi3-2,
input.sheet-charm[value="3"] ~ button.sheet-gi3-3,
input.sheet-charm[value="4"] ~ button.sheet-gi3-4,
input.sheet-charm[value="5"] ~ button.sheet-gi3-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-falsehooddetection[value="0"] ~ button.sheet-gi4-0,
input.sheet-falsehooddetection[value="1"] ~ button.sheet-gi4-1,
input.sheet-falsehooddetection[value="2"] ~ button.sheet-gi4-2,
input.sheet-falsehooddetection[value="3"] ~ button.sheet-gi4-3,
input.sheet-falsehooddetection[value="4"] ~ button.sheet-gi4-4,
input.sheet-falsehooddetection[value="5"] ~ button.sheet-gi4-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-highsociety[value="0"] ~ button.sheet-gi5-0,
input.sheet-highsociety[value="1"] ~ button.sheet-gi5-1,
input.sheet-highsociety[value="2"] ~ button.sheet-gi5-2,
input.sheet-highsociety[value="3"] ~ button.sheet-gi5-3,
input.sheet-highsociety[value="4"] ~ button.sheet-gi5-4,
input.sheet-highsociety[value="5"] ~ button.sheet-gi5-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-intimidation[value="0"] ~ button.sheet-gi6-0,
input.sheet-intimidation[value="1"] ~ button.sheet-gi6-1,
input.sheet-intimidation[value="2"] ~ button.sheet-gi6-2,
input.sheet-intimidation[value="3"] ~ button.sheet-gi6-3,
input.sheet-intimidation[value="4"] ~ button.sheet-gi6-4,
input.sheet-intimidation[value="5"] ~ button.sheet-gi6-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-reassurance[value="0"] ~ button.sheet-gi7-0,
input.sheet-reassurance[value="1"] ~ button.sheet-gi7-1,
input.sheet-reassurance[value="2"] ~ button.sheet-gi7-2,
input.sheet-reassurance[value="3"] ~ button.sheet-gi7-3,
input.sheet-reassurance[value="4"] ~ button.sheet-gi7-4,
input.sheet-reassurance[value="5"] ~ button.sheet-gi7-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-streetwise[value="0"] ~ button.sheet-gi8-0,
input.sheet-streetwise[value="1"] ~ button.sheet-gi8-1,
input.sheet-streetwise[value="2"] ~ button.sheet-gi8-2,
input.sheet-streetwise[value="3"] ~ button.sheet-gi8-3,
input.sheet-streetwise[value="4"] ~ button.sheet-gi8-4,
input.sheet-streetwise[value="5"] ~ button.sheet-gi8-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-taunt[value="0"] ~ button.sheet-gi9-0,
input.sheet-taunt[value="1"] ~ button.sheet-gi9-1,
input.sheet-taunt[value="2"] ~ button.sheet-gi9-2,
input.sheet-taunt[value="3"] ~ button.sheet-gi9-3,
input.sheet-taunt[value="4"] ~ button.sheet-gi9-4,
input.sheet-taunt[value="5"] ~ button.sheet-gi9-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-forgery[value="0"] ~ button.sheet-gt1-0,
input.sheet-forgery[value="1"] ~ button.sheet-gt1-1,
input.sheet-forgery[value="2"] ~ button.sheet-gt1-2,
input.sheet-forgery[value="3"] ~ button.sheet-gt1-3,
input.sheet-forgery[value="4"] ~ button.sheet-gt1-4,
input.sheet-forgery[value="5"] ~ button.sheet-gt1-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-hacking[value="0"] ~ button.sheet-gt2-0,
input.sheet-hacking[value="1"] ~ button.sheet-gt2-1,
input.sheet-hacking[value="2"] ~ button.sheet-gt2-2,
input.sheet-hacking[value="3"] ~ button.sheet-gt2-3,
input.sheet-hacking[value="4"] ~ button.sheet-gt2-4,
input.sheet-hacking[value="5"] ~ button.sheet-gt2-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-medicalexpertise[value="0"] ~ button.sheet-gt3-0,
input.sheet-medicalexpertise[value="1"] ~ button.sheet-gt3-1,
input.sheet-medicalexpertise[value="2"] ~ button.sheet-gt3-2,
input.sheet-medicalexpertise[value="3"] ~ button.sheet-gt3-3,
input.sheet-medicalexpertise[value="4"] ~ button.sheet-gt3-4,
input.sheet-medicalexpertise[value="5"] ~ button.sheet-gt3-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-notice[value="0"] ~ button.sheet-gt4-0,
input.sheet-notice[value="1"] ~ button.sheet-gt4-1,
input.sheet-notice[value="2"] ~ button.sheet-gt4-2,
input.sheet-notice[value="3"] ~ button.sheet-gt4-3,
input.sheet-notice[value="4"] ~ button.sheet-gt4-4,
input.sheet-notice[value="5"] ~ button.sheet-gt4-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-outdoorsurvival[value="0"] ~ button.sheet-gt5-0,
input.sheet-outdoorsurvival[value="1"] ~ button.sheet-gt5-1,
input.sheet-outdoorsurvival[value="2"] ~ button.sheet-gt5-2,
input.sheet-outdoorsurvival[value="3"] ~ button.sheet-gt5-3,
input.sheet-outdoorsurvival[value="4"] ~ button.sheet-gt5-4,
input.sheet-outdoorsurvival[value="5"] ~ button.sheet-gt5-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-paradoxprevention[value="0"] ~ button.sheet-gt6-0,
input.sheet-paradoxprevention[value="1"] ~ button.sheet-gt6-1,
input.sheet-paradoxprevention[value="2"] ~ button.sheet-gt6-2,
input.sheet-paradoxprevention[value="3"] ~ button.sheet-gt6-3,
input.sheet-paradoxprevention[value="4"] ~ button.sheet-gt6-4,
input.sheet-paradoxprevention[value="5"] ~ button.sheet-gt6-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-science[value="0"] ~ button.sheet-gt7-0,
input.sheet-science[value="1"] ~ button.sheet-gt7-1,
input.sheet-science[value="2"] ~ button.sheet-gt7-2,
input.sheet-science[value="3"] ~ button.sheet-gt7-3,
input.sheet-science[value="4"] ~ button.sheet-gt7-4,
input.sheet-science[value="5"] ~ button.sheet-gt7-5 {
background-color: rgb(204, 221, 202);
}
input.sheet-spying[value="0"] ~ button.sheet-gt8-0,
input.sheet-spying[value="1"] ~ button.sheet-gt8-1,
input.sheet-spying[value="2"] ~ button.sheet-gt8-2,
input.sheet-spying[value="3"] ~ button.sheet-gt8-3,
input.sheet-spying[value="4"] ~ button.sheet-gt8-4,
input.sheet-spying[value="5"] ~ button.sheet-gt8-5 {
background-color: rgb(204, 221, 202);
}