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

:root {
	--scrpg-background: white;
	--scrpg-foreground: black;
	--scrpg-darkblue: #004499;
	--scrpg-highlight: #ddeeff;
	--scrpg-palegreen: #eeffee;
	--scrpg-palegreenfg: #000000;
	--scrpg-paleyellow: #ffffee;
	--scrpg-paleyellowfg: #000000;
	--scrpg-palered: #ffeeee;
	--scrpg-paleredfg: #000000;
	--scrpg-palegray: #eeeeee;
	--scrpg-palegrayfg: #000000;
	--scrpg-darkgray: #282828;
	background-color: var(--scrpg-background);
	color: var(--scrpg-foreground);
}

/* Strip off all the unwanted bells and whistles Roll20 saddles us with */

.btn {
	background-image: none;
	text-shadow: none;
	box-shadow: none;
}

.sheet-darkmode .tab-content .charsheet {
	--scrpg-background: #1f1f1f;
	--scrpg-foreground: #eee;
	--scrpg-highlight: #333333;
	--scrpg-palegreen: #000000;
	--scrpg-palegreenfg: #99ff99;
	--scrpg-paleyellow: #000000;
	--scrpg-paleyellowfg: #ffcc99;
	--scrpg-palered: #000000;
	--scrpg-paleredfg: #ff9999;
	--scrpg-palegray: #000000;
	--scrpg-palegrayfg: #eeeeee;
}

.tab-content .charsheet button.colorized,
.tab-content .charsheet input,
.tab-content .charsheet select,
.tab-content .charsheet textarea,
.tab-content .charsheet
{
	background-color: var(--scrpg-background);
	color: var(--scrpg-foreground);
}

.sheet-whole {
	min-width: 775px;
}

.sheet-padding {
	padding: 3px;
}

.sheet-smalldata.sheet-centered, 
.sheet-centered {
	text-align: center;
	align-items: center;
}

.sheet-bigname,
input.sheet-bignum,
input.sheet-bigname {
	font-family: "Bangers", Arial, sans-serif;
	letter-spacing: 1pt;
	font-size: 30pt;
	color: var(--scrpg-foreground);
	border: none;
}

input.sheet-bigname {
	border-bottom: 0.5px solid black;
	margin-right: 6px;
	margin-bottom: 6px;
	width: 100%;
}

input.sheet-bignum {
	text-align: center;
	background: none;
}

.sheet-smalldata-row {
	clear: both;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: start;
	align-content: stretch;
	margin-bottom: 6px;
}

.sheet-smalldata {
	font-size: 9pt;
	clear: both;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: start;
	align-content: stretch;
	flex-grow: 1;
	margin-right: 6px;
}

.sheet-smalldata input[type=text] {
	font-size: 10pt;
	border: none;
	border-bottom: 0.5px solid var(--scrpg-foreground);
	background: none;
	flex-grow: 1;
	width: 100%;
}

.sheet-smalldata textarea {
	font-size: 10pt;
	border: none;
	border-top: 0.5px solid var(--scrpg-foreground);
	border-bottom: 0.5px solid var(--scrpg-foreground);
	flex-grow: 1;
	width: calc(100% - 9px);
	background: none;
}

.sheet-collection-row {
	clear: both;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
}

.sheet-collection-row > span {
	min-width: 30px;
}

.sheet-collection-row input[type=text] {
	font-size: 12pt;
	border: none;
	border-bottom: 0.5px solid var(--scrpg-foreground);
	flex-grow: 0;
	max-width: 145px;
}

.sheet-dicecols-rows,
.sheet-dicecols {
	clear: both;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
}

.sheet-dicecols {
	flex-wrap: nowrap;
}

.sheet-dicecols-rows {
	flex-wrap: wrap;
}

.sheet-dicecol-unadorned,
.sheet-dicecol {
	clear: both;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-content: stretch;
	justify-content: flex-start;
	min-width: 180px;
	flex-grow: 2;
}

.sheet-dicecol {
	border: 1px solid var(--scrpg-foreground);
	box-shadow: 3px 3px var(--scrpg-darkblue);
	margin-right: 9px;
	margin-bottom: 9px;
}

.sheet-slowflexgrow {
	flex-grow: 1;
}

.sheet-halfsies {
	width: calc(50% - 12px);
	flex-basis: calc(50% - 12px);
}

.sheet-thirdsies {
	width: calc(33% - 12px);
	flex-basis: calc(33% - 12px);
}

.sheet-twothirdsies {
	width: calc(67% - 12px);
	flex-basis: calc(67% - 12px);
}

.sheet-noflexgrow {
	flex-grow: 0;
}

textarea.sheet-modest {
	height: 60px;
}

.sheet-abilities .repcontrol,
.sheet-dicecol .repcontrol {
	display: none;
}

.sheet-editcol .repcontrol {
	display: initial;
}

.sheet-fade-on-zero + * {
	opacity: 1.0;
}

.sheet-fade-on-zero[value="0"] + * {
	opacity: 0.5;
}

.sheet-hide-on-empty[value=""] + *,
.sheet-hide-on-4[value="4"] + *,
.sheet-hide-on-12[value="12"] + *,
.sheet-hide-on-one[value="1"] + *,
.sheet-hide-on-zero[value="0"] + * {
	display: none;
}

.sheet-dicecol-head {
	font-family: "Bangers", Arial, sans-serif;
	letter-spacing: 1pt;
	font-size: 18pt;
	font-weight: bold;
	padding: 1px;
	padding-left: 7px;
	padding-right: 7px;
	margin-bottom: 6px;
	text-align: center;
	background-color: var(--scrpg-darkblue);
	color: white;
}

.sheet-abilities-head.sheet-lefty,
.sheet-lefty {
	text-align: left;
}

.sheet-dicerow {
	clear: both;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
	line-height: 1.0;
}

.sheet-dicerow select {
	width: 80px;
	height: 28px;
}

.sheet-dicerow input[type=text] {
	width: calc(100% - 90px);
	height: 28px;
}

.sheet-die {
	flex-grow: 0;
	flex-shrink: 0;
	width: 30px;
	height: 24pt;
	min-width: 30px;
	max-width: 30px;
}

.sheet-dielabel {
	flex-grow: 1;
	font-size: 15pt;
	color: var(--scrpg-foreground);
	padding-bottom: 0px;
	padding-left: 6px;
}

.sheet-120 {
	width: 120px;
}

input.sheet-dieselected[value=""] ~ .sheet-die,
input.sheet-dieselected[value=""] ~ .sheet-dielabel
{
	background-color: var(--scrpg-background);
	font-weight: normal;
}

input.sheet-dieselected[value="1"] ~ .sheet-die,
input.sheet-dieselected[value="1"] ~ .sheet-dielabel
{
	background-color: var(--scrpg-highlight);
	font-weight: bold;
}


.sheet-box-colorizer[value="red"] + input + .sheet-dicecol input.sheet-dieselected[value=""] ~ .sheet-die,
.sheet-box-colorizer[value="red"] + input + .sheet-dicecol input.sheet-dieselected[value=""] ~ .sheet-dielabel
{
	background-color: var(--scrpg-palered);
	color: var(--scrpg-paleredfg);
	font-weight: normal;
}

.sheet-box-colorizer[value="red"] + input + .sheet-dicecol input.sheet-dieselected[value="1"] ~ .sheet-die,
.sheet-box-colorizer[value="red"] + input + .sheet-dicecol input.sheet-dieselected[value="1"] ~ .sheet-dielabel
{
	background-color: #dd0000;
	color: white;
	font-weight: bold;
}

/* here's a problem: if I change the "d" in "dval" to "die", all rolltemplate formatting stops working; man, wtf? */

input.sheet-dval ~ .sheet-die > .sheet-diepic {
	width: 30px;
	height: 30px;
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d4.svg);
}

input.sheet-dval[value="4"] ~ .sheet-die > .sheet-diepic {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d4.svg);
}

input.sheet-dval[value="6"] ~ .sheet-die > .sheet-diepic {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d6.svg);
}

input.sheet-dval[value="8"] ~ .sheet-die > .sheet-diepic {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d8.svg);
}

input.sheet-dval[value="10"] ~ .sheet-die > .sheet-diepic {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d10.svg);
}

input.sheet-dval[value="12"] ~ .sheet-die > .sheet-diepic {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d12.svg);
}

input[type="checkbox"].sheet-dieboxer {
	opacity: 0.0;
	width: 180px;
	height: 24px;
	position: relative;
	top: 8px; /* -12px; */
	left: 28px;
	margin: -24px;
	cursor: pointer;
	z-index: 2;
}

.sheet-dieboxer + .sheet-diepic {
	position: relative;
	top: -14px;
	left: 0px;
	z-index: 1;
}

.sheet-inline-label {
	font-size: 13pt;
	font-weight: bold;
}

.sheet-inline-label ~ input[type="checkbox"].sheet-oval-marker + .sheet-oval-icon::before {
	margin-top: 6px;
}

input[type="checkbox"].sheet-oval-marker {
	opacity: 0.0;
	width: 25px;
	height: 14px;
	position: relative;
	top: -1px;
	left: 16px;
	margin: -14px;
	cursor: pointer;
	z-index: 2;
}

input[type="checkbox"].sheet-oval-marker + span.sheet-oval-icon::before {
	margin-right: -2px; /* ? */
	margin-left: 4px;
	margin-top: 1px; /* ? */
	line-height: 14px; /* ? */
	text-align: center; /* ? */
	display: inline-block;
	vertical-align: top; /* ? */
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-oval-unmarked.svg);
	width: 25px;
	height: 14px;
	font-size: 12px; /* ? */
}

input[type="checkbox"].sheet-oval-marker:checked + span.sheet-oval-icon::before {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-oval-marked.svg);
}

.sheet-colorizer + * {
	color: #333;
}

.sheet-colorizer[value="green"] + *,
.sheet-status-green {
	color: #009900;
}

.sheet-colorizer[value="yellow"] + *,
.sheet-status-yellow {
	color: #cc9900;
}

.sheet-colorizer[value="red"] + *,
.sheet-status-red {
	color: #cc0000;
}

.sheet-pow-green, .sheet-pow-yellow, .sheet-pow-red {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	font-size: 14px;
	font-weight: bold;
	padding-top: 12px;
	width: 108px;
	height: 30px;
}

.sheet-opaque {
	opacity: 1.0;
}

.sheet-translucent {
	opacity: 0.5;
}

/* This is button formatting */
.sheet-scene .sheet-pow-red,
.sheet-scene .sheet-pow-yellow,
.sheet-scene .sheet-pow-green {
	width: 72px; height: 12px; /* height adjusted by subtracting top/bottom padding */
	padding: 0px;
	padding-top: 8px;
	margin-bottom: 8px;
	padding-bottom: 8px;
	background-size: contain;
	border: none;
	background-color: transparent;
	font-family: 'Pictos';
	margin-top: -2px;
}

.sheet-pow-green {
	color: white;
	background-image: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-pow-green.svg);
}

.sheet-pow-yellow {
	color: black;
	background-image: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-pow-yellow.svg);
}

.sheet-pow-red {
	color: white;
	background-image: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-pow-red.svg);
}

.sheet-rollcols {
	clear: both;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-end;
	align-content: stretch;
}

.sheet-rollblock {
	flex-grow: 1;
	vertical-align: middle;
	line-height: 24px;
	font-size: 10pt;
	clear: both;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: center;
	align-content: stretch;
}

.sheet-buttons button,
.sheet-editcol .repcontrol .repcontrol_add,
.sheet-editcol .repcontrol .repcontrol_edit,
.sheet-rollblock button {
	border: 1px solid #004499;
	background: #ddeeff;
	color: black;
	font-weight: normal;
	text-align: left;
	padding: 2px;
	padding-bottom: 0px;
	margin: 6px;
	vertical-align: middle;
}

.sheet-buttons button:hover,
.sheet-buttons button:hover span {
	color: white;
}

.sheet-buttons button:hover,
.sheet-buttons button:hover span,
.sheet-editcol .repcontrol .repcontrol_add:hover,
.sheet-editcol .repcontrol .repcontrol_add:hover span,
.sheet-editcol .repcontrol .repcontrol_edit:hover,
.sheet-editcol .repcontrol .repcontrol_edit:hover span,
.sheet-rollblock button:hover, 
.sheet-rollblock button:hover span {
	background: #004499;
	font-weight: bold;
}

.sheet-editcol .repcontrol .repcontrol_add:hover,
.sheet-editcol .repcontrol .repcontrol_add:hover span,
.sheet-editcol .repcontrol .repcontrol_edit:hover,
.sheet-editcol .repcontrol .repcontrol_edit:hover span {
	color: white;
	text-shadow: none;
}

.sheet-rollblock > span {
	padding-left: 3px;
	padding-right: 3px;
	text-align: center;
	line-height: 1;
}

.ui-dialog .charsheet button:before {
	content: '';
}

input.sheet-inlinedie + .sheet-diepic {
	width: 30px;
	height: 30px;
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d4.svg);
}

input.sheet-inlinedie[value="4"] + .sheet-diepic {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d4.svg);
}

input.sheet-inlinedie[value="6"] + .sheet-diepic {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d6.svg);
}

input.sheet-inlinedie[value="8"] + .sheet-diepic {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d8.svg);
}

input.sheet-inlinedie[value="10"] + .sheet-diepic {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d10.svg);
}

input.sheet-inlinedie[value="12"] + .sheet-diepic {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d12.svg);
}

.sheet-healthbox {
	min-width: 130px;
	flex-basis: 130px;
}

.sheet-healthbox input.sheet-bignum[type=number] {
	width: 120px;
	border-bottom: .5px solid black;
}

.sheet-abilities {
	font-size: 12pt;
}

.sheet-abilities-out,
.sheet-abilities-red,
.sheet-abilities-yellow,
.sheet-abilities-green {
	clear: both;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-content: stretch;
	justify-content: flex-start;
	min-width: 240px;
	border: 1px solid var(--scrpg-foreground);
	margin-right: 9px;
	margin-bottom: 9px;
	flex-grow: 2;
}

.sheet-abilities-head {
	font-family: "Bangers", Arial, sans-serif;
	letter-spacing: 1pt;
	font-size: 18pt;
	font-weight: bold;
	padding: 1px;
	padding-left: 7px;
	padding-right: 7px;
	text-align: center;
	background-color: black;
	color: white;
}

.sheet-abilities-row {
	clear: both;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
}

.sheet-abilities-row .sheet-ability-icons {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 75px;
	text-align: center;
	line-height: 1;
}

.sheet-abilities-row .sheet-ability-type {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 45px;
	text-align: center;
}

.sheet-abilities-row .sheet-ability-description {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 50%;
	line-height: 1.4;
}

.sheet-ability-type select {
	width: 40px;
	height: 28px;
}

.sheet-abilities-row textarea {
	width: calc(100% - 15px);
	height: 60px;
}

.sheet-box-colorizer[value="green"] + input + .sheet-dicecol,
.sheet-box-colorizer[value="green"] + .sheet-dicecol,
.sheet-abilities-green {
	background-color: var(--scrpg-palegreen);
	color: var(--scrpg-palegreenfg);
	box-shadow: 3px 3px #009900;
}

.sheet-box-colorizer[value="yellow"] + input + .sheet-dicecol,
.sheet-box-colorizer[value="yellow"] + .sheet-dicecol,
.sheet-abilities-yellow {
	background-color: var(--scrpg-paleyellow);
	color: var(--scrpg-paleyellowfg);
	box-shadow: 3px 3px #ffcc00;
}

.sheet-box-colorizer[value="red"] + input + .sheet-dicecol,
.sheet-box-colorizer[value="red"] + .sheet-dicecol,
.sheet-abilities-red {
	background-color: var(--scrpg-palered);
	color: var(--scrpg-paleredfg);
	box-shadow: 3px 3px #cc0000;
}

.sheet-ability-green {
	background-color: var(--scrpg-palegreen);
	color: var(--scrpg-palegreenfg);
}

.sheet-ability-green button[type=action] {
	color: white;
	background-color: #009900;
}

.sheet-box-colorizer[value="green"] + input + .sheet-dicecol .sheet-dicecol-head,
.sheet-box-colorizer[value="green"] + .sheet-dicecol .sheet-dicecol-head,
.sheet-abilities-green .sheet-abilities-head {
	background-color: #009900;
}

.sheet-ability-yellow {
	background-color: var(--scrpg-paleyellow); 
	color: var(--scrpg-paleyellowfg);
}

.sheet-ability-yellow button[type=action] {
	color: black;
	background-color: #ffcc00;
}

.sheet-box-colorizer[value="yellow"] + input + .sheet-dicecol .sheet-dicecol-head,
.sheet-box-colorizer[value="yellow"] + .sheet-dicecol .sheet-dicecol-head,
.sheet-abilities-yellow .sheet-abilities-head {
	background-color: #ffcc00;
	color: black;
}

.sheet-ability-red {
	background-color: var(--scrpg-palered);
	color: var(--scrpg-paleredfg);
}

.sheet-box-colorizer[value="red"] + input + .sheet-dicecol .sheet-dicecol-head,
.sheet-box-colorizer[value="red"] + .sheet-dicecol .sheet-dicecol-head,
.sheet-ability-red button[type=action] {
	color: white;
	background-color: #cc0000;
}

.sheet-abilities-red .sheet-abilities-head {
	background-color: #cc0000;
}

.sheet-box-colorizer[value="out"] + input + .sheet-dicecol,
.sheet-box-colorizer[value="out"] + .sheet-dicecol,
.sheet-abilities-out {
	background-color: var(--scrpg-palegray);
	color: var(--scrpg-palegrayfg);
	box-shadow: 3px 3px #000000;
}

.sheet-ability-out {
	background-color: var(--scrpg-palegray);
	color: var(--scrpg-palegrayfg);
}

.sheet-ability-out button[type=action] {
	color: white;
	background-color: #000000;
}

.sheet-box-colorizer[value="out"] + input + .sheet-dicecol .sheet-dicecol-head,
.sheet-box-colorizer[value="out"] + .sheet-dicecol .sheet-dicecol-head,
.sheet-abilities-out .sheet-abilities-head {
	background-color: var(--scrpg-darkgray);
}

.sheet-rolltemplate-minionroll .sheet-action-icon-a,
.sheet-rolltemplate-minionroll .sheet-action-icon-b,
.sheet-rolltemplate-minionroll .sheet-action-icon-h,
.sheet-rolltemplate-minionroll .sheet-action-icon-o,
.sheet-rolltemplate-minionroll .sheet-action-icon-d,
.sheet-rolltemplate-minionroll .sheet-action-icon-r,
.sheet-rolltemplate-simple .sheet-action-icon-a,
.sheet-rolltemplate-simple .sheet-action-icon-b,
.sheet-rolltemplate-simple .sheet-action-icon-h,
.sheet-rolltemplate-simple .sheet-action-icon-o,
.sheet-rolltemplate-simple .sheet-action-icon-d,
.sheet-rolltemplate-simple .sheet-action-icon-r,
.sheet-rolltemplate-3pool .sheet-action-icon-a,
.sheet-rolltemplate-3pool .sheet-action-icon-b,
.sheet-rolltemplate-3pool .sheet-action-icon-h,
.sheet-rolltemplate-3pool .sheet-action-icon-o,
.sheet-rolltemplate-3pool .sheet-action-icon-d,
.sheet-rolltemplate-3pool .sheet-action-icon-r,
.sheet-action-icon-a,
.sheet-action-icon-b,
.sheet-action-icon-h,
.sheet-action-icon-o,
.sheet-action-icon-d,
.sheet-action-icon-r {
	display: inline-block;
	height: 16pt;
	width: 16pt;
}

.sheet-rolltemplate-minionroll .sheet-action-icon-a,
.sheet-rolltemplate-minionroll .sheet-action-icon-b,
.sheet-rolltemplate-minionroll .sheet-action-icon-h,
.sheet-rolltemplate-minionroll .sheet-action-icon-o,
.sheet-rolltemplate-minionroll .sheet-action-icon-d,
.sheet-rolltemplate-minionroll .sheet-action-icon-r,
.sheet-rolltemplate-simple .sheet-action-icon-a,
.sheet-rolltemplate-simple .sheet-action-icon-b,
.sheet-rolltemplate-simple .sheet-action-icon-h,
.sheet-rolltemplate-simple .sheet-action-icon-o,
.sheet-rolltemplate-simple .sheet-action-icon-d,
.sheet-rolltemplate-simple .sheet-action-icon-r,
.sheet-rolltemplate-3pool .sheet-action-icon-a,
.sheet-rolltemplate-3pool .sheet-action-icon-b,
.sheet-rolltemplate-3pool .sheet-action-icon-h,
.sheet-rolltemplate-3pool .sheet-action-icon-o,
.sheet-rolltemplate-3pool .sheet-action-icon-d,
.sheet-rolltemplate-3pool .sheet-action-icon-r {
	margin-bottom: -4pt;
}


button.sheet-icon-button,
.sheet-icon {
	height: 16pt;
	width: 16pt;
}

.sheet-h-icon {
	height: 16pt;
	width: 16pt;
	vertical-align: middle;
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-H.svg);
}

.sheet-rolltemplate-minionroll .sheet-action-icon-a,
.sheet-rolltemplate-3pool .sheet-action-icon-a,
.sheet-rolltemplate-simple .sheet-action-icon-a,
.sheet-action-icon-a,
.sheet-action-icon[value="A"] + .sheet-icon {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-action-attack.svg);
}

.sheet-rolltemplate-minionroll .sheet-action-icon-b,
.sheet-rolltemplate-3pool .sheet-action-icon-b,
.sheet-rolltemplate-simple .sheet-action-icon-b,
.sheet-action-icon-b,
.sheet-action-icon[value="B"] + .sheet-icon {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-action-boost.svg);
}

.sheet-rolltemplate-minionroll .sheet-action-icon-h,
.sheet-rolltemplate-3pool .sheet-action-icon-h,
.sheet-rolltemplate-simple .sheet-action-icon-h,
.sheet-action-icon-h,
.sheet-action-icon[value="H"] + .sheet-icon {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-action-hinder.svg);
}

.sheet-rolltemplate-minionroll .sheet-action-icon-o,
.sheet-rolltemplate-3pool .sheet-action-icon-o,
.sheet-rolltemplate-simple .sheet-action-icon-o,
.sheet-action-icon-o,
.sheet-action-icon[value="O"] + .sheet-icon {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-action-overcome.svg);
}

.sheet-rolltemplate-minionroll .sheet-action-icon-d,
.sheet-rolltemplate-3pool .sheet-action-icon-d,
.sheet-rolltemplate-simple .sheet-action-icon-d,
.sheet-action-icon-d,
.sheet-action-icon[value="D"] + .sheet-icon {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-action-defend.svg);
}

.sheet-rolltemplate-minionroll .sheet-action-icon-r,
.sheet-rolltemplate-3pool .sheet-action-icon-r,
.sheet-rolltemplate-simple .sheet-action-icon-r,
.sheet-action-icon-r,
.sheet-action-icon[value="R"] + .sheet-icon {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-action-recover.svg);
}


.sheet-buttonless {
	border: none;
	background: none;
	color: black;
	font-weight: normal;
	text-align: left;
	padding: 0px;
	vertical-align: top;
}

.sheet-buttonless:hover, 
.sheet-buttonless:hover span {
	background-color: #ddeeff;
	font-weight: bold;
}

.ui-dialog .charsheet button.sheet-button-delete:before {
	font-family: 'Pictos';
	font-size: 16px;
	content: '#';
}

.ui-dialog .charsheet button.sheet-button-increase:before {
	font-family: 'Pictos';
	font-size: 16px;
	content: '{';
}

.ui-dialog .charsheet button.sheet-button-decrease:before {
	font-family: 'Pictos';
	font-size: 16px;
	content: '}';
}

.sheet-button-decrease,
.sheet-button-increase,
.sheet-button-delete {
	border: none;
	background: none;
	opacity: 0.5;
	font-weight: normal;
	text-align: left;
	padding: 0px;
	vertical-align: top;
}

.sheet-button-delete, 
.sheet-button-delete span {
	color: red;
}

.sheet-button-delete:hover, 
.sheet-button-delete:hover span {
	opacity: 1.0;
}

.sheet-button-decrease, 
.sheet-button-decrease span {
	color: #0066ff;
}

.sheet-button-decrease:hover, 
.sheet-button-decrease:hover span {
	opacity: 1.0;
}

.sheet-button-increase, 
.sheet-button-increase span {
	color: #009900;
}

.sheet-button-increase:hover, 
.sheet-button-increase:hover span {
	opacity: 1.0;
}

.ui-dialog .charsheet button.sheet-button-header-edit:before {
	font-family: 'Pictos';
	font-size: 24px;
	content: 'p';
}

.ui-dialog .charsheet button.sheet-button-header-close:before {
	font-family: 'Pictos';
	font-size: 24px;
	content: 'D';
}

.ui-dialog .charsheet button.sheet-button-header-collapse:before {
	font-family: 'Pictos';
	font-size: 24px;
	content: 'J';
}

.ui-dialog .charsheet button.sheet-button-header-expand:before {
	font-family: 'Pictos';
	font-size: 24px;
	content: '`';
}

.sheet-button-header-expand,
.sheet-button-header-collapse,
.sheet-button-header-edit,
.sheet-button-header-close {
	border: none;
	background: none;
	font-weight: normal;
	text-align: left;
	padding-top: 7px;
	padding-bottom: 7px;
	vertical-align: top;
}

.sheet-button-header-edit,
.sheet-button-header-close {
	padding-right: 0px;
	float: right;
}

.sheet-button-header-expand,
.sheet-button-header-collapse {
	padding-left: 0px;
	float: left;
}

.sheet-button-header-expand,
.sheet-button-header-collapse,
.sheet-button-header-edit,
.sheet-button-header-close {
	color: white;
	opacity: 0.75;
}

.sheet-button-header-expand:hover, 
.sheet-button-header-expand:hover span,
.sheet-button-header-collapse:hover, 
.sheet-button-header-collapse:hover span,
.sheet-button-header-edit:hover, 
.sheet-button-header-edit:hover span,
.sheet-button-header-close:hover, 
.sheet-button-header-close:hover span {
	opacity: 1.0;
}

.sheet-modline {
	clear: both;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	align-content: stretch;
	margin-bottom: 6px;
}

.sheet-modline select {
	width: 4em;
}

.sheet-modline input[type=text] {
	width: 25%;
}

.sheet-mode-editor .repcontrol {
	display: initial;
}

.sheet-mode-editor .itemcontrol button.repcontrol_del,
.sheet-mode-editor .repcontrol button.repcontrol_add {
	display: none;
}

.sheet-mode-edit {
	clear: both;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: baseline;
	align-content: stretch;
	margin-top: 9px;
	padding-top: 6px;
	border-top: 1px solid black;
}

.sheet-mode-edit input[type=text] {
	width: calc(50% - 6px);
}

.sheet-mode-edit textarea {
	width: calc(50% - 6px);
	height: 60px;
}

/* .sheet-modgrid button, */
.sheet-mode-editor button,
.sheet-modline button {
	border: 1px solid #004499;
	background: #ddeeff;
	color: black;
	font-weight: bold;
	text-align: left;
	padding: 2px;
	padding-bottom: 0px;
	margin-bottom: 6px;
	vertical-align: middle;
}

/* .sheet-modgrid button:hover, 
.sheet-modgrid button:hover span, */
.sheet-mode-editor button:hover,
.sheet-mode-editor button:hover span,
.sheet-modline button:hover, 
.sheet-modline button:hover span {
	background: #004499;
	font-weight: bold;
	color: white;
}

.sheet-modgrid .repcontainer[data-groupname=repeating_bonuses] .repitem,
.sheet-modgrid .repcontainer[data-groupname=repeating_penalties] .repitem {
	display: inline-block;
	width: 9em;
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 6px;
	vertical-align: top;
}

.sheet-modnum {
	font-weight: bold;
	font-size: 28px;
	font-family: "Bangers", Arial, sans-serif;
	letter-spacing: 1pt;
	height: 36px;
	color: white;
	background-image: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-pow-black.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	text-shadow: 0px 0px 2px black;
}

/* .sheet-healthbox .sheet-healthcontrol, */
.sheet-modifier .sheet-modcontrol {
	display: none;
}

/* .sheet-healthbox:hover .sheet-healthcontrol, */
.sheet-modifier:hover .sheet-modcontrol {
	display: initial;
}

textarea.sheet-principle {
	width: calc(100% - 9px);
	height: 60px;
}

.sheet-minions div.sheet-dicerow {
	margin-bottom: 6px;
}

.sheet-controlcell {
	opacity: 0.0;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 50px;
}

.sheet-dicerow:hover .sheet-controlcell {
	opacity: 1.0;
}

.sheet-rolltemplate-announcement div.sheet-template-container,
.sheet-rolltemplate-minionroll div.sheet-template-container,
.sheet-rolltemplate-simple div.sheet-template-container,
.sheet-rolltemplate-3pool div.sheet-template-container {
	border: 1px solid black;
	background: transparent;
	box-shadow: 3px 3px #004499;
	margin-right: 9px;
	margin-bottom: 9px;
}

.sheet-rolltemplate-announcement div.sheet-template-container {
	padding: 3px;
}

.sheet-rolltemplate-3pool div.sheet-template-color-green,
.sheet-rolltemplate-minionroll div.sheet-template-color-green,
.sheet-rolltemplate-simple div.sheet-template-color-green,
.sheet-rolltemplate-announcement div.sheet-template-color-green {
	background-color: var(--scrpg-palegreen);
	color: var(--scrpg-palegreenfg);
	box-shadow: 3px 3px #009900;
}

.sheet-rolltemplate-3pool div.sheet-template-color-yellow,
.sheet-rolltemplate-minionroll div.sheet-template-color-yellow,
.sheet-rolltemplate-simple div.sheet-template-color-yellow,
.sheet-rolltemplate-announcement div.sheet-template-color-yellow {
	background-color: var(--scrpg-paleyellow);
	color: var(--scrpg-paleyellowfg);
	box-shadow: 3px 3px #ffcc00;
}

.sheet-rolltemplate-3pool div.sheet-template-color-red,
.sheet-rolltemplate-minionroll div.sheet-template-color-red,
.sheet-rolltemplate-simple div.sheet-template-color-red,
.sheet-rolltemplate-announcement div.sheet-template-color-red {
	background-color: var(--scrpg-palered);
	color: var(--scrpg-paleredfg);
	box-shadow: 3px 3px #cc0000;
}

.sheet-rolltemplate-3pool div.sheet-template-color-out,
.sheet-rolltemplate-minionroll div.sheet-template-color-out,
.sheet-rolltemplate-simple div.sheet-template-color-out,
.sheet-rolltemplate-announcement div.sheet-template-color-out {
	background-color: var(--scrpg-palegray);
	color: var(--scrpg-palegrayfg);
	box-shadow: 3px 3px #000000;
}

.sheet-rolltemplate-simple .sheet-template-body {
	padding: 6px;
}

.sheet-rolltemplate-minionroll .sheet-template-head,
.sheet-rolltemplate-3pool .sheet-template-head,
.sheet-rolltemplate-simple .sheet-template-head {
	font-family: "Bangers", Arial, sans-serif;
	line-height: 1.0;
	letter-spacing: 1pt;
	font-size: 18pt;
	font-weight: bold;
	padding: 3px;
	padding-left: 7px;
	padding-right: 7px;
	margin-bottom: 6px;
	text-align: center;
	background-color: #004499;
	color: white;
}

.sheet-rolltemplate-3pool div.sheet-template-color-green .sheet-template-head,
.sheet-rolltemplate-minionroll div.sheet-template-color-green .sheet-template-head,
.sheet-rolltemplate-simple div.sheet-template-color-green .sheet-template-head {
	background-color: #009900;
}

.sheet-rolltemplate-3pool div.sheet-template-color-yellow .sheet-template-head,
.sheet-rolltemplate-minionroll div.sheet-template-color-yellow .sheet-template-head,
.sheet-rolltemplate-simple div.sheet-template-color-yellow .sheet-template-head {
	background-color: #ffcc00;
	color: black;
}

.sheet-rolltemplate-3pool div.sheet-template-color-red .sheet-template-head,
.sheet-rolltemplate-minionroll div.sheet-template-color-red .sheet-template-head,
.sheet-rolltemplate-simple div.sheet-template-color-red .sheet-template-head {
	background-color: #cc0000;
}

.sheet-rolltemplate-3pool div.sheet-template-color-out .sheet-template-head,
.sheet-rolltemplate-minionroll div.sheet-template-color-out .sheet-template-head,
.sheet-rolltemplate-simple div.sheet-template-color-out .sheet-template-head {
	background-color: black;
}


.sheet-rolltemplate-simple .sheet-diepic4,
.sheet-rolltemplate-minionroll .sheet-diepic4,
.sheet-rolltemplate-3pool .sheet-diepic4,
.sheet-rolltemplate-simple .sheet-diepic6,
.sheet-rolltemplate-minionroll .sheet-diepic6,
.sheet-rolltemplate-3pool .sheet-diepic6,
.sheet-rolltemplate-simple .sheet-diepic8,
.sheet-rolltemplate-minionroll .sheet-diepic8,
.sheet-rolltemplate-3pool .sheet-diepic8,
.sheet-rolltemplate-simple .sheet-diepic10,
.sheet-rolltemplate-3pool .sheet-diepic10,
.sheet-rolltemplate-minionroll .sheet-diepic10,
.sheet-rolltemplate-simple .sheet-diepic12,
.sheet-rolltemplate-minionroll .sheet-diepic12,
.sheet-rolltemplate-3pool .sheet-diepic12 {
	width: 30px;
	height: 30px;
}

.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-diepic4,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-diepic4,
.sheet-rolltemplate-3pool .sheet-bigdie  .sheet-diepic4,
.sheet-rolltemplate-minionroll .sheet-bigdie  .sheet-diepic6,
.sheet-rolltemplate-simple .sheet-bigdie  .sheet-diepic6,
.sheet-rolltemplate-3pool .sheet-bigdie  .sheet-diepic6,
.sheet-rolltemplate-minionroll .sheet-bigdie  .sheet-diepic8,
.sheet-rolltemplate-simple .sheet-bigdie  .sheet-diepic8,
.sheet-rolltemplate-3pool .sheet-bigdie  .sheet-diepic8,
.sheet-rolltemplate-minionroll .sheet-bigdie  .sheet-diepic10,
.sheet-rolltemplate-simple .sheet-bigdie  .sheet-diepic10,
.sheet-rolltemplate-3pool .sheet-bigdie  .sheet-diepic10,
.sheet-rolltemplate-minionroll .sheet-bigdie  .sheet-diepic12,
.sheet-rolltemplate-simple .sheet-bigdie  .sheet-diepic12,
.sheet-rolltemplate-3pool .sheet-bigdie  .sheet-diepic12 {
	width: 30px;
	height: 30px;
	margin-bottom: -6px;
}

.sheet-rolltemplate-minionroll .sheet-bigdie,
.sheet-rolltemplate-simple .sheet-bigdie,
.sheet-rolltemplate-3pool .sheet-bigdie {
	text-align: center;
	vertical-align: center;
}

.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-bigresult, 
.sheet-rolltemplate-simple .sheet-bigdie .sheet-bigresult, 
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-bigresult 
{
	font-size: 16px;
	font-weight: bold;
}

.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller {
	position: relative;
	display: inline-block;
}

.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller .sheet-drilldown,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller .sheet-drilldown,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-driller .sheet-drilldown {
	visibility: hidden;
	position: absolute;
	width: 150px;
	top: calc(100% - 30px); 
	left: 50%; 
	margin-left: -75px;
	z-index: 1;
	padding: 3px;
	border: 0.5px solid black;
	color: #ffffdd;
	background-color: #333;
	box-shadow: 2px 2px 4px black;
}

.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller .sheet-righthanded,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller .sheet-righthanded {
	margin-left: -110px;
}

.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller .sheet-lefthanded,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller .sheet-lefthanded {
	margin-left: -40px;
}

.sheet-rolltemplate-minionroll .sheet-bigthree,
.sheet-rolltemplate-3pool .sheet-bigthree {
	clear: both;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: start;
	align-content: stretch;
}

.sheet-rolltemplate-minionroll .sheet-bigthree .sheet-bigdie,
.sheet-rolltemplate-3pool .sheet-bigthree .sheet-bigdie {
	width: calc(33% - 6px);
	flex-basis: calc(33% - 6px);
}

.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller .sheet-drilldown > div,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller .sheet-drilldown > div,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-driller .sheet-drilldown > div {
	clear: both;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: start;
	align-content: stretch;
}

.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller .sheet-drilldown > div > span,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller .sheet-drilldown > div > span,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-driller .sheet-drilldown > div > span {
	padding-right: 6px;
	flex-basis: 24px; /* 44px; */
	flex-grow: 0;
	flex-shrink: 0;
}

.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller .sheet-drilldown > div > span.sheet-wider,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller .sheet-drilldown > div > span.sheet-wider,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-driller .sheet-drilldown > div > span.sheet-wider {
	flex-basis: 88px;
	flex-grow: 1;
}

.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller .sheet-drilldown > div > span.sheet-action-icon-o,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller .sheet-drilldown > div > span.sheet-action-icon-o,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-driller .sheet-drilldown > div > span.sheet-action-icon-o {
	flex-basis: 20pt;
}

.sheet-rolltemplate-minionroll .sheet-bigdie:hover .sheet-driller .sheet-drilldown,
.sheet-rolltemplate-3pool .sheet-bigdie:hover .sheet-driller .sheet-drilldown,
.sheet-rolltemplate-simple .sheet-bigdie:hover .sheet-driller .sheet-drilldown {
	visibility: visible;
}

.sheet-rolltemplate-simple .sheet-diecaption,
.sheet-rolltemplate-minionroll .sheet-diecaption,
.sheet-rolltemplate-3pool .sheet-diecaption {
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 3px;
}

.sheet-rolltemplate-simple .sheet-diepic4,
.sheet-rolltemplate-minionroll .sheet-diepic4,
.sheet-rolltemplate-3pool .sheet-diepic4 {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d4.svg);
}

.sheet-rolltemplate-simple .sheet-diepic6,
.sheet-rolltemplate-minionroll .sheet-diepic6,
.sheet-rolltemplate-3pool .sheet-diepic6 {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d6.svg);
}

.sheet-rolltemplate-simple .sheet-diepic8,
.sheet-rolltemplate-minionroll .sheet-diepic8,
.sheet-rolltemplate-3pool .sheet-diepic8 {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d8.svg);
}

.sheet-rolltemplate-simple .sheet-diepic10,
.sheet-rolltemplate-minionroll .sheet-diepic10,
.sheet-rolltemplate-3pool .sheet-diepic10 {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d10.svg);
}

.sheet-rolltemplate-simple .sheet-diepic12,
.sheet-rolltemplate-minionroll .sheet-diepic12,
.sheet-rolltemplate-3pool .sheet-diepic12 {
	content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d12.svg);
}

.sheet-rolltemplate-minionroll .sheet-drilldown-header,
.sheet-rolltemplate-3pool .sheet-drilldown-header {
	padding-left: 60px; /* because CSS can't be arsed to obey text-align: center */
	width: 90px; /* not including the 50px padding */
	text-transform: uppercase;
	font-size: 10pt;
	font-weight: bold;
	color: #eeeeee;
	background: black;
	padding-top: 2px;
	padding-bottom: 2px;
}

.sheet-hoverpopper + .sheet-hoverpop {
	display: none;
}

.sheet-hoverpopper:hover + .sheet-hoverpop {
	display: inline-block;
	position: absolute;
	z-index: 1;
}

.sheet-countup ~ .sheet-counter {
	display: none;
}

.sheet-hoverpop {
	color: var(--scrpg-foreground);
	background-color: var(--scrpg-background);
	border: 0.5px solid var(--scrpg-foreground);
}

.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter,
.sheet-countup[value="7"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="7"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="7"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="7"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="7"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="7"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="7"] + .sheet-counter,
.sheet-countup[value="6"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="6"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="6"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="6"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="6"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="6"] + .sheet-counter,
.sheet-countup[value="5"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="5"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="5"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="5"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="5"] + .sheet-counter,
.sheet-countup[value="4"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="4"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="4"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="4"] + .sheet-counter,
.sheet-countup[value="3"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="3"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="3"] + .sheet-counter,
.sheet-countup[value="2"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="2"] + .sheet-counter,
.sheet-countup[value="1"] + .sheet-counter {
	display: inline-block;
}

.sheet-challenge-component {
	clear: both;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: start;
	align-items: start;
	align-content: stretch;
}

.sheet-challenge-component div:first-child {
	white-space: nowrap;
}

.sheet-highlight-on-one[value="1"] + div {
	background-color: #009900;
	color: white;
}