@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');


.charsheet {
	font-family: "EB Garamond", serif;
	background: gray;
}

.charsheet:has(> div > input[name="attr_font_picker"][value="1"]){
	font-family: "Google Sans Flex", sans-serif;
}

.charsheet > div{
	display: grid;
	grid-template-columns: 50% 50%;
}

.charsheet > div > div.font-picker{
	justify-self: end;
}

.charsheet > div > div.font-picker > span{
	color: white;
	-webkit-text-stroke: 0.1px black;
}

.charsheet .title-wrapper .title{
	font-family: "UnifrakturCook", cursive;
	font-weight: 700;
	font-style: normal;
	font-size: 44pt;
	text-align:center;
	text-justify:center;
	color: white;
	display: grid;
	place-items: center;
	-webkit-text-stroke: 1px black;
}

.charsheet .title-wrapper .subtitle{
	font-family: "EB Garamond", serif;
	font-weight: 700;
	font-style: normal;
	font-size: 14pt;
	text-align:center;
	text-justify:center;
	color: black;
	display: grid;
	place-items: center;
}

.charsheet .section_title,
.charsheet .input_label{
	font-optical-sizing: auto;
	font-weight: bold;
	font-style: normal;
	font-size: 11pt;
}

.charsheet .section_title{
	font-size: 13pt;
}

input,
select,
textarea{ 
	color: black;
} 

.charsheet input[type="number"]{ 
	text-align: center;
} 

input[readonly],
select[disabled],
textarea[readonly]{ 
	cursor: pointer;
	pointer-events: none; 
} 

.charsheet .outer_box{
	border: black 1px solid;
	border-radius: 10px;
	margin: 10px;
	padding: 10px;
	background: white;
}

.charsheet .inner_box{
	
}

/* Grid */

.charsheet .sheet-grid-section{
	display: grid;
	grid-template-columns: 50% 50%;
}

.charsheet .top_left{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.charsheet .top_right{
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}

.charsheet .bottom_left{
	grid-column: 1 / 2;
	grid-row: 2 / 4;
}

.charsheet .bottom_right{
	grid-column: 2 / 3;
	grid-row: 2 / 4;
}
	
.charsheet div.top{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.charsheet div.bottom{
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
	
.charsheet .wide-grid{
	grid-column-end: span 2;
}

/* TABS */

	/* configure the tab buttons */
	.charsheet .sheet-main,
	.charsheet .sheet-details {
		display: none;
	}

	/* style the active button */
	.charsheet .sheet-tabstoggle[value="main"] ~ div .sheet-button0 {outline: 2px solid red;}
	.charsheet .sheet-tabstoggle[value="details"] ~ div .sheet-button1 {outline: 2px solid red;}

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

/* NUMBER FIELDS */

	/*Firefox spinner buttons mod*/
	/*by default is not visible*/
	.charsheet input[Type="number"]{
		-moz-appearance: textfield;
	}
	/* hover over reveals buttons*/
	.charsheet input[Type="number"]:hover{
		-moz-appearance: initial;
	}
	/* Chrome, Safari, Edge, Opera spinner buttons*/
	/*by default is not visible*/
	.charsheet input[type="number"]::-webkit-inner-spin-button, 
	.charsheet input[type="number"]::-webkit-outer-spin-button {
		display: none;
	}
	/* hover over reveals buttons*/
	.charsheet input[type="number"]:hover::-webkit-inner-spin-button, 
	.charsheet input[type="number"]:hover::-webkit-outer-spin-button {
		display: inline
	}

/* Textinputs */
	.charsheet input.name_textfield{
		width: 12em;
	}

	.charsheet select.ba_input{
		min-width: 9em;
		width:9em;
	}

	.charsheet input[type="number"].ap_cost_input{
		width: 3em;
		display:inline-block;
	}

	.charsheet input[type="number"].pool_input{
		width: 3em;
		display:inline-block;
	}

/* Textareas */

	.charsheet textarea.textbox {
		resize: none;
		box-sizing: border-box;
		height: 6em;
	}

/* Max Attributes */

	span.extendedValue{
		display: none;
	}

	input.extendedBubble{
		display: none;
	}

	input.maxforcheck[value="1"] ~ input.extendedBubble{
		display: inline-block;
	}

	input.maxforcheck[value="1"] ~ span.extendedValue {
	  display: inline-block;
	}

	input.maxbodcheck[value="1"] ~ input.extendedBubble{
		display: inline-block;
	}

	input.maxbodcheck[value="1"] ~ span.extendedValue {
	  display: inline-block;
	}

	input.maxspecheck[value="1"] ~ input.extendedBubble{
		display: inline-block;
	}

	input.maxspecheck[value="1"] ~ span.extendedValue {
	  display: inline-block;
	}

	input.maxintcheck[value="1"] ~ input.extendedBubble{
		display: inline-block;
	}

	input.maxintcheck[value="1"] ~ span.extendedValue {
	  display: inline-block;
	}

	input.maxfeecheck[value="1"] ~ input.extendedBubble{
		display: inline-block;
	}

	input.maxfeecheck[value="1"] ~ span.extendedValue {
	  display: inline-block;
	}

	input.maxintcheck[value="1"] ~ input.extendedBubble{
		display: inline-block;
	}

	input.maxintcheck[value="1"] ~ span.extendedValue {
	  display: inline-block;
	}

	input.maxexpcheck[value="1"] ~ input.extendedBubble{
		display: inline-block;
	}

	input.maxexpcheck[value="1"] ~ span.extendedValue {
	  display: inline-block;
	}

	input.maximpcheck[value="1"] ~ input.extendedBubble{
		display: inline-block;
	}

	input.maximpcheck[value="1"] ~ span.extendedValue {
	  display: inline-block;
	}

/* Checkboxes & Radios */

	input[type="checkbox"].sheet-normal.bubbles + span::before{
		content: "";
		width: 10px;
		height: 10px;
		font-size: 41.9px;
		font-family: "Arial";
		text-indent: -2px;
		font-weight: normal;
		
		-webkit-font-smoothing: antialiased;
		-moz-border-radius: 25%;
		-webkit-border-radius: 25%;
		border-radius: 25%;
	}

	input[type="checkbox"].sheet-normal.bubbles:has(~ input[type="checkbox"].sheet-normal.bubbles:checked) + span::before,
	input[type="checkbox"].sheet-normal.bubbles:checked + span::before{
		content: "•";
	}

	/* Hide actual dot/checkbox */
	input[type="radio"].sheet-normal,
	input[type="checkbox"].sheet-normal
	{
		position: absolute;
		opacity: 0.0;
		width: 15px;
		cursor: pointer;
		z-index: 10;
		margin-top: 5px;
	}

	/* Styles common to fake dot and checkbox */
	input[type="radio"].sheet-normal + span::before,
	input[type="checkbox"].sheet-normal + span::before,
	.sheet-permadot::before
	{
		border: solid 1px #000000;
		line-height: 11px;
		text-align: center;
		display: inline-block;
		vertical-align: middle;
		
		-moz-box-shadow: 0 0 0px #000;
		-webkit-box-shadow: 0 0 0px #000;
		box-shadow: 0 0 0px #000;
		
		background: #000000;
		background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
		background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
		background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
		background: -o-radial-gradient(#f6f6f6, #dfdfdf);
		background: radial-gradient(#f6f6f6, #dfdfdf);
	}
	
	/* Styles common to fake dot and checkbox */
	body.sheet-darkmode input[type="radio"].sheet-normal + span::before,
	body.sheet-darkmode input[type="checkbox"].sheet-normal + span::before,
	body.sheet-darkmode .sheet-permadot::before
	{
		border: solid 1px #fff;
		background: #1f1f1f;
	}

	/* Styles unique to fake dot (checked or left of checked) */
	input[type="radio"].sheet-normal + span::before,
	input[type="checkbox"].sheet-normal:not(.bubbles) + span::before,
	.sheet-permadot::before
	{
		content: "•";
		width: 10px;
		height: 10px;
		font-size: 41.9px;
		font-family: "Arial";
		text-indent: -2px;
		font-weight: normal;
		
		-webkit-font-smoothing: antialiased;
		-moz-border-radius: 25%;
		-webkit-border-radius: 25%;
		border-radius: 25%;
	}

	/* Remove dot from all radios _after_ selected one */
	input[type="radio"].sheet-normal:checked ~ input[type="radio"] + span::before,
	input[type="checkbox"].sheet-normal:not(.bubbles):not(:checked) + span::before
	{    
		content: "";
	}

	input.sheet-zero:checked + span::before
	{
		opacity: 0;
	}

	input.sheet-zero:hover + span::before
	{
		opacity: 0.25;
		font-size: 12px;
		content: "✖";
		text-indent: 0.5px;
	}

	input.sheet-zero + span::before
	{
		opacity: 0;
	}

/* POP UP */

	.overlay {
	  position: fixed;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: rgba(0, 0, 0, 0.7);
	  transition: opacity 500ms;
	  visibility: hidden;
	  opacity: 0;
	}
	.overlay:target {
	  visibility: visible;
	  opacity: 1;
	}

	.popup {
	  margin: 70px auto;
	  padding: 20px;
	  background: #fff;
	  border-radius: 5px;
	  width: 30%;
	  position: relative;
	  transition: all 5s ease-in-out;
	}

	body.sheet-darkmode .popup {
	  background: #1f1f1f;
	}

	.popup h2 {
	  margin-top: 0;
	  color: #333;
	  font-family: Tahoma, Arial, sans-serif;
	}
	.popup .close {
	  position: absolute;
	  top: 20px;
	  right: 30px;
	  transition: all 200ms;
	  font-size: 30px;
	  font-weight: bold;
	  text-decoration: none;
	  color: #333;
	}
	.popup .close:hover {
	  color: #06D85F;
	}
	.popup .content {
	  max-height: 30%;
	  overflow: auto;
	}

/* Main Page */

	.charsheet div.sheet-main div.sheet-grid-section{
		display: grid;
		grid-template-columns: 30% 30% 30% 10%;
	}
	
/* Character Details */
	.charsheet div.character-details.sub-grid{
		display: grid;
		grid-template-columns: 33.3% 33.3% 33.3%;
		grid-auto-rows: max-content;
		
		grid-column: 2 / 5;
		grid-row: 1 / 2;
	}
	
	.charsheet div.character-details.sub-grid div.top-left{
		grid-column: 1 / 3;
		grid-row: 1 / 2;
		flex-shrink: 1;
	}
	
	.charsheet div.character-details.sub-grid div.top-right{
		grid-column: 3 / 4;
		grid-row: 1 / 2;
		flex-shrink: 1;
	}
	
	.charsheet div.character-details.sub-grid div.bottom-left{
		grid-column: 1 / 2;
		grid-row: 2 / 3;
		flex-shrink: 1;
	}
	
	.charsheet div.character-details.sub-grid div.bottom-middle{
		grid-column: 2 / 3;
		grid-row: 2 / 3;
		flex-shrink: 1;
	}
	
	.charsheet div.character-details.sub-grid div.bottom-right{
		grid-column: 3 / 4;
		grid-row: 2 / 3;
		flex-shrink: 1;
	}
	
	.charsheet div.character-details input[type="text"]{
		width: 100%;
	}
	
/* Signature Move */
	.charsheet div.charge-wrapper.sub-grid{
		display: grid;
		grid-template-columns: 30% 70%;
		
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	
	.charsheet div.charge-wrapper .box.sub-grid{
		display: grid;
		grid-template-columns: 15% 70% 15%;
		
		margin-top:2em;
	}
	
	.charsheet div.charge-wrapper .box input{
		width:100%;
	}
	
	.charsheet .popup .content{
		display: grid;
		grid-template-columns: 50% 50%;
		
		margin-top:2em;
	}
	
/* Stats */
	.charsheet div.stats-wrapper.sub-grid{
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: 50% 50%;
				
		grid-column: 1 / 2;
		grid-row: 3 / 4;
		
		gap:1em;
	}
	
	.charsheet div.stats-wrapper div.stat-wrapper{
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: 50% 50%;
	}
	
	.charsheet .stat_dec,
	.charsheet .stat_inc{
		border: solid 1px #000000;
		line-height: 11px;
		text-align: center;
		display: inline-block;
		vertical-align: middle;
		
		-moz-box-shadow: 0 0 0px #000;
		-webkit-box-shadow: 0 0 0px #000;
		box-shadow: 0 0 0px #000;
		
		background: #000000;
		background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
		background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
		background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
		background: -o-radial-gradient(#f6f6f6, #dfdfdf);
		background: radial-gradient(#f6f6f6, #dfdfdf);
		
		content:"-";
		width: 10px;
		height: 10px;
		font-size: 15px;
		font-family: "Arial";
		text-indent: -2px;
		font-weight: bold;
		text-align: center;
		text-justify: center;
		
		-webkit-font-smoothing: antialiased;
		-moz-border-radius: 25%;
		-webkit-border-radius: 25%;
		border-radius: 25%;
	}
	
/* Status Effects */
	.charsheet div.status-effect-wrapper.sub-grid{
		display: grid;
		grid-template-columns: 50% 50%;
				
		grid-column: 1 / 2;
		grid-row: 4 / 5;
	}
	
	.charsheet div.status-effect-wrapper.sub-grid div.effect-wrapper{
		display: grid;
		grid-template-columns: 80% 20%;
	}
	
/* Attributes */
	.charsheet div.sub-grid.attributes-wrapper{
		display: grid;
		grid-template-columns: 100%;
				
		grid-column: 2 / 3;
		grid-row: 2 / 6;
	}
	
	.charsheet div.attribute-wrapper{
		display: grid;
		grid-template-columns: 20% 40% 40%;
	}
	
	.charsheet div.attribute-wrapper div.attribute_points{
		justify-self: end;
	}
	
/* Talents */
	.charsheet div.talents-wrapper.sub-grid{
		display: grid;
		grid-template-columns: 100%;
				
		grid-column: 3 / 4;
		grid-row: 2 / 5;
	}
	
	.charsheet div.talents-wrapper div.talent-wrapper{
		display: grid;
		grid-template-columns: 20% 40% 40%;
	}
	
	.charsheet div.talents-wrapper div.talent-wrapper div.pool_points{
		justify-self: end;
	}
	
	.charsheet div.talents-wrapper div.talent-wrapper div.skilled_point{
		justify-self: center;
	}
	
/* Plot Points */
	.charsheet div.plot-points-wrapper.sub-grid{
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: 20% 10% 10% 10% 10% 10% 15% 15%;
				
		grid-column: 4 / 5;
		grid-row: 2 / 5;
	}
	
	.charsheet div.plot-points-wrapper.sub-grid div{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.charsheet div.plot-points-wrapper.sub-grid span{
		justify-self:center;
		align-self:center;
	}
	
	.charsheet div.plot-points-wrapper.sub-grid input[type="number"]{
		font-size: 15pt;
		width:2em;
	}
	
	.charsheet div.plot-points-wrapper > div:has(~ div > input[type="checkbox"].sheet-normal.bubbles:checked) > span::before{
		content: "•";
	}
	
/* Actions */
	.charsheet div.actions-wrapper.sub-grid{
		display: grid;
		grid-template-columns: 50% 50%;
				
		grid-column: 1 / 2;
		grid-row: 5 / 6;
	}
	
/* Abilities */
	.charsheet div.abilities-wrapper.sub-grid{
		display: grid;
		grid-template-columns: 100%;
				
		grid-column: 3 / 5;
		grid-row: 5 / 6;
	}
	
	.charsheet div.abilities-wrapper.sub-grid .repcontrol[data-groupname=repeating_abilities] button.repcontrol_edit, 
	.charsheet div.abilities-wrapper.sub-grid .repcontrol[data-groupname=repeating_abilities] button.repcontrol_add, 
	.charsheet div.abilities-wrapper.sub-grid .repcontrol[data-groupname=repeating_abilities] button.repcontrol_del {
	  display: none;
	}
	
/* Cumulative Talents */
	.charsheet div.cum-talents-wrapper.sub-grid{
		display: grid;
		grid-template-columns: 100%;
				
		grid-column: 1 / 2;
		grid-row: 6 / 7;
	}
	
/* Weapon Talents */
	.charsheet div.weapon-talents-wrapper.sub-grid{
		display: grid;
		grid-template-columns: 100%;
				
		grid-column: 2 / 5;
		grid-row: 6 / 7;
	}
	
	.charsheet div.sheet-main div.weapon-talent-wrapper{
		display: grid;
		grid-template-columns: 5% 20% 10% 10% 20% 35%;
				
		grid-column: 2 / 5;
		grid-row: 6 / 7;
	}
	
	.charsheet div.weapon-talent-wrapper div input[type="text"],
	.charsheet div.weapon-talent-wrapper div input[type="number"],
	.charsheet div.weapon-talent-wrapper div select{
		width: 100%;
	}
	
	.charsheet div.weapon-talents-wrapper.sub-grid .repcontrol[data-groupname=repeating_weapon-talents] button.repcontrol_edit, 
	.charsheet div.weapon-talents-wrapper.sub-grid .repcontrol[data-groupname=repeating_weapon-talents] button.repcontrol_add, 
	.charsheet div.weapon-talents-wrapper.sub-grid .repcontrol[data-groupname=repeating_weapon-talents] button.repcontrol_del {
	  display: none;
	}

/* Reactions */
	.charsheet div.reactions-wrapper.sub-grid{
		display: grid;
		grid-template-columns: 50% 50%;
				
		grid-column: 1 / 5;
		grid-row: 7 / 8;
	}
	
	.charsheet div.reactions-wrapper div.sheet-condensed-reactions.sub-grid{
		display: grid;
		grid-template-columns: 20% 60% 5% 15%;
		
		margin: 0.1em;
		padding: 0.5em;
		border: 0.1em solid gray;
	}
	
	.charsheet div.reactions-wrapper div.sheet-condensed-reactions.sub-grid input[type="text"],
	.charsheet div.reactions-wrapper div.sheet-condensed-reactions.sub-grid select{
		width:100%;
	}
	
	.charsheet div.reactions-wrapper div.sheet-condensed-reactions.sub-grid .wide-grid{
		grid-column-end: span 3;
	}
	
	.charsheet div.reactions-wrapper.sub-grid .repcontrol[data-groupname=repeating_reactions] button.repcontrol_edit, 
	.charsheet div.reactions-wrapper.sub-grid .repcontrol[data-groupname=repeating_reactions] button.repcontrol_add, 
	.charsheet div.reactions-wrapper.sub-grid .repcontrol[data-groupname=repeating_reactions] button.repcontrol_del {
	  display: none;
	}
	
	.charsheet div.reactions-wrapper div.sheet-condensed-reactions input[name="attr_reaction-Is-Incantation"][value="1"] ~ .hidden_reaction_ba{
	  display: inline-block;
	}
	
	.charsheet div.reactions-wrapper div.sheet-condensed-reactions .hidden_reaction_ba.wide-grid{
	  grid-column-end: span 3;
	}

/* Character Info */
	.charsheet .character-info-wrapper{
		display:flex;
		flex-direction:column ;
	}
	.charsheet .character-info-wrapper div{
		flex-grow: 1;
	}
	.charsheet .character-info-wrapper div textarea{
		height: 100%;
	}
	
/* Epithets */
	.charsheet .epithets-wrapper .epithet-wrapper{
		display:grid;
		grid-template-columns: 15% 85%;
	}
	
	.charsheet .epithets-wrapper .epithet-wrapper input[type="text"]{
		width:100%;
	}
	
	.charsheet .epithets-wrapper div.input{
		justify-self: center;
	}

/* Inventory */
	.charsheet .item-wrapper{
		display: grid;
		grid-template-columns: 12% 73% 15%;
	}
	
	.charsheet .item-wrapper input[type="text"]{
		width: auto;
	}
	
	.charsheet .item-wrapper div.input{
		justify-self: center;
	}

/* ABILITY */
	.charsheet div.ability-wrapper{
		display: grid;
		grid-template-columns: 100%;
		
		margin: 0.1em;
		padding: 0.5em;
	}

/* SIGNATURE MOVE */
	.charsheet div.signature-move-wrapper{
		display: grid;
		grid-template-columns: 50% 50%;
	}

/* WEAPON TALENTS */
	.charsheet div.weapon-talent-wrapper{
		display: grid;
		grid-template-columns: 20% 5% 5% 20% 45% 15%;
	}
	
	.charsheet div.weapon-talent-wrapper div input[type="text"],
	.charsheet div.weapon-talent-wrapper div input[type="number"],
	.charsheet div.weapon-talent-wrapper div select{
		width: 100%;
	}
	
	div.weapon-masteries-wrapper{
		display:none;
	}

	.charsheet div.weapon-talent-wrapper div:has(input[type="checkbox"].visibility-toggle:checked) ~ div.weapon-masteries-wrapper{
		display: grid;
		grid-template-columns: 50% 50%;
		
		grid-column: 1 / 7;
	}

	.charsheet div.weapon-talent-wrapper div.weapon-masteries-wrapper div.weapon-mastery-wrapper{
		display: grid;
		grid-template-columns: 12% 88%;
		
		margin: 0.1em;
		padding: 0.5em;
	}

	.charsheet div.weapon-talent-wrapper div.weapon-masteries-wrapper div.weapon-mastery-wrapper .input{
		justify-self: center;
	}

	div.sheet-condensed-masteries{
		display:none;
	}

	.charsheet div.sheet-condensed-masteries:has(> input[value="1"].sheet-condensed-masteries-toggle){
		display: grid;
		grid-template-columns: 100%;
		
		grid-column: 1 / 7;
	}

	.charsheet div.sheet-condensed-masteries div.filtered.weapon-mastery-wrapper{
		display:none;
	}

	.charsheet div.sheet-condensed-masteries div.filtered.mastery-1:has(> input[value="1"].sheet-filtered-mastery-toggle){
		display: grid;
		grid-template-columns: 20% 80%;
	}

	.charsheet div.sheet-condensed-masteries div.filtered.mastery-2:has(> input[value="2"].sheet-filtered-mastery-toggle){
		display: grid;
		grid-template-columns: 20% 80%;
	}
	
	.charsheet div.sheet-condensed-masteries div.filtered.weapon-mastery-wrapper input,
	.charsheet div.sheet-condensed-masteries div.filtered.weapon-mastery-wrapper textarea{
		height: auto;
	}
	
	.charsheet div.plot-points-wrapper.sub-grid div{
		display: flex;
		justify-content: center;
		align-items: center;
	}

/* REACTIONS */
	
	.charsheet div.repcontainer[data-groupname="repeating_reactions"]{
		display: grid;
		grid-template-columns: 50% 50%;
	}
	
	.charsheet div.sheet-reaction-wrapper{
		display: grid;
		grid-template-columns: 90% 10%;
		grid-template-rows: minmax(47px,3em) minmax(56px,3em);
		
		margin: 0.1em;
		padding: 0.5em;
		border: 0.1em solid gray;
	}
	
	.charsheet div.sheet-reaction-wrapper > div.sub-grid{
		display: grid;
		grid-template-columns: 25% 75%;
	}
	
	.charsheet div.sheet-reaction-wrapper > div > input[type="text"],
	.charsheet div.sheet-reaction-wrapper > div > input[type="number"],
	.charsheet div.sheet-reaction-wrapper > div > select{
		width: 100%;
	}

	.hidden_reaction_ba{
		display:none;
	}

	div:has(> input[type="checkbox"].visibility-toggle:checked) ~ div > .hidden_reaction_ba{
		display:inline-block;
	}

	div.sheet-condensed-reactions{
		display:none;
	}

	div.sheet-condensed-reactions:has(> input[value="1"]){
		display: inline-block;
	}
	
/* Darkmode */
	

body.sheet-darkmode button,
body.sheet-darkmode input,
body.sheet-darkmode optgroup,
body.sheet-darkmode select,
body.sheet-darkmode textarea,
body.sheet-darkmode .charsheet,
body.sheet-darkmode .charsheet .subtitle {
	color: #eee
}

body.sheet-darkmode input,
body.sheet-darkmode input[readonly],
body.sheet-darkmode select,
body.sheet-darkmode select[disabled],
body.sheet-darkmode textarea,
body.sheet-darkmode button,
body.sheet-darkmode .charsheet .outer_box{
	background: #1f1f1f;
}


	
body.sheet-darkmode .charsheet .stat_dec,
body.sheet-darkmode .charsheet .stat_inc{
	color: #1f1f1f;
}

body.sheet-darkmode .btn,
body.sheet-darkmode .btn.btn-default {
	color: #c8c3bc;
	text-shadow: rgba(24,26,27,.75) 0px 1px 1px;
	background-color: #1e2021;
	background-image: linear-gradient(#181a1b, #26292b);
	border-color: #3e4446 #3e4446 #43494c;
	box-shadow: rgba(24,26,27,.2) 0px 1px 0px inset,rgba(0,0,0,.05) 0px 1px 2px
}