/************************************************************************************************
	//	Monsters 2024 Style
************************************************************************************************/
:root{
	--statblock-bg-color: #f6f3ee;
	--monster-color: #a7a3a0;
	--monster-title-color: brown;
	--input-bg-color: #b0c4de99;
	--output-bg-color: #ded4cc;
	--output-bg-color-transparent: #ded4cc99;
}
.testing-colors{
	color: darksalmon;
}
.monster-2024{
	border: 1px solid var(--monster-title-color);
	min-height: 3em;
	margin: 1em auto;
	max-width: 500px;
	max-width: 800px;
	padding: .5em;
	position: relative;
	background-color: transparent;
	border-radius: 3px;
	background-color: var(--statblock-bg-color);
	break-inside: avoid;
	column-span: all;
	line-height: 1.3em;
}
.monster-2024 p{
	margin-bottom: .5em;
}
.monster-2024 p:empty{
	display: none;
}

.monster-2024 .mon-border{
	padding: .5em;
	border: 1px solid var(--monster-color);
}
.monster-2024 .mon-border h2{
	column-span: all;
}
.monster-2024 .monster-title{
	font-family: 'Germania One', serif;
	font-size: 1.5em;
	border-bottom: 2px solid var(--monster-color);
	padding: .2em 0;
	font-size: 1.8em;
	margin-top: 0;
	color: var(--monster-title-color);
}
.top-section{
	position: relative;
	display: flex;
}
.top-section .top-section-text{
	flex-grow: 1;
}
.top-section .top-squares{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 40%;
	margin: 0;
	column-gap: .5em;
	row-gap: .5em;
}
.top-section .top-square{
	flex-basis: 30%;
	flex-grow: 1;
	width: 3.5em;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.top-section .top-square .score{
	width: 100%;
	text-align: center;
	background-color: var(--output-bg-color-transparent);
	padding: .3em 0;
}
.top-section .top-square span{
	display: block;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	background-color: var(--input-bg-color);
	padding: .3em 0;
	font-size: .9em;
	width: 100%;
}

.monster-2024 .monster-stats{
	text-transform: uppercase;
	width: 100%;
}

.monster-2024 .monster-stats thead tr th{
	font-size: .9em;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
}

.monster-2024 .monster-stats tbody tr td{
	border: 0px solid var(--monster-color);
	text-align: center;
	padding: .3em .5em;
	background-color: var(--output-bg-color-transparent);
}
body .panel-white .panel-body .monster-2024 table.monster-stats tbody td,
body .panel-white .panel-body .monster-2024 table.monster-stats thead th,
body .panel-white .panel-body .monster-2024 table.monster-stats{
	border: 0;
}
body .panel-white .panel-body .monster-2024 table.monster-stats thead th{
	background-color: transparent;
}
.monster-2024 .monster-stats tbody tr td,
body .panel-white .panel-body .monster-2024 table.monster-stats tbody td{
	border-bottom: 2px solid var(--statblock-bg-color);
}
.monster-2024 .monster-stats tbody tr:last-child td,
body .panel-white .panel-body .monster-2024 table.monster-stats tbody tr:last-child td{
	border-bottom: 0;
}


.monster-2024 .monster-stats tbody tr td:nth-child(1),
.monster-2024 .monster-stats tbody tr td:nth-child(5),
.monster-2024 .monster-stats tbody tr td:nth-child(9){
	background-color: var(--input-bg-color);
	text-align: right;
	font-weight: bold;
}
.monster-2024 .monster-stats tbody tr td:nth-child(2),
.monster-2024 .monster-stats tbody tr td:nth-child(6),
.monster-2024 .monster-stats tbody tr td:nth-child(10){
	font-weight: bold;
}

.monster-2024 .mon-features{
	padding: 0;
	list-style: none;
	margin: .5em 0;
}
.monster-2024 .top-section .mon-features{
	margin-top: 0;
}
.monster-2024 .action-title{
	margin:  0 0 0 .5em;
	position: relative;
}
.monster-2024 .action-title:before{
	content: 'Actions';
	display: block;
	border-bottom: 2px solid var(--monster-color);
	padding: .2em 0;
	font-size: 1.1em;
	margin-top: 0;
	margin-bottom: .5em;
	color: var(--monster-title-color);
}
.monster-2024 .action-title:before{
	content:'Actions';
}
.monster-2024 .action-title.legendary-actions:before{
	content:'Legendary Actions';
}
.monster-2024 .action-title.mythic-phases:before{
	content:'Mythic Phases';
}
.monster-2024 .action-title .mythic-transition{
	border: solid rgb(152, 102, 11);
	border-width: .5em 0 .5em .2em;
	border-radius: .5em 0 0 .5em;
	padding: .3em .5em;
	margin: 0.5em -1em 0.5em 0;
}
.monster-2024 .action-title.psionic-actions:before{
	content:'Psionic Actions';
}
.monster-2024 .action-title.reactions:before{
	content:'Reactions';
}
.monster-2024 .action-title.bonus-actions:before{
	content:'Bonus Actions';
}
.monster-2024 .action-title.treasure:before{
	content:'Treasure';
}
.monster-2024 .action-title.traits:before{
	content:'Traits';
}

.monster-2024 .action-points{
	position: absolute;
	height: 2.5em;
	width: 2.5em;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--monster-color);
	background-color: var(--output-bg-color);
	top: 0;
	right: 0;
	font-weight: bold;
	font-size: 1.1em;
}